ドラッグである要素を選択したときに、その中の要素が選択状態になってしまう。この文字列の選択状態を解除する方法。
例えば、テーブルのセルをドラッグで複数選択すると下図のように、セルの中のテキストが選択されて見づらい。
↓ 実現したいこと（文字列は選択しないようにする）
主な実現方法は以下２つ。１が圧倒的に簡単。２は参考程度に。
1. cssでuser-selectプロパティの設定
user-select: none;
対象の要素に上記を適用するとテキスト選択を解除できる。
コピペ防止でテキストの選択が全くできないページがあるが、その設定と同じ。
user-selectプロパティのその他オプション
user-selectプロパティは、none以外にも選択できる値がある。
| 値 | 概要 | 詳細 |
|---|---|---|
| none | 選択禁止 | 対象要素とその子孫要素の文章を範囲選択できなくする |
| all | 全選択 | どれか一つの文字を選択するとすべて選択する。 |
| text | テキスト選択可 | デフォルトの状態 |
| contain | 要素の内部から選択 | 要素の内部から選択を始めることができます。しかし、選択範囲は要素の境界内のみに限定。 |
| auto | 要素の種類や親要素のプロパティにより変化 | 編集可能な要素の場合、使用値は containになる。親要素の user-select の使用値が all の場合、対象要素の使用値も all になる。など、 |
▼user-select:all
2. JSで選択解除
以下処理を実行することで選択状態を解除できる。
constclearSelection=()=>{//旧IEvarselif(sel=document.selection){sel.empty();}//旧IE以外のブラウザ else{//選択解除if(window.getSelection){window.getSelection().removeAllRanges();}//入力中のテキストボックスの選択解除varactiveEl=document.activeElement;if(activeEl){vartagName=activeEl.nodeName.toLowerCase();if(tagName=="textarea"||(tagName=="input"&&activeEl.type=="text")){// Collapse the selection to the endactiveEl.selectionStart=activeEl.selectionEnd;}}}}・document.selection
旧IE（IE９〜10）のみ。ユーザーが選択した文字列範囲を指す。
IE11以降はwindow.getSelection()を使用。
・window.getSelection()
ユーザーが選択した文字列範囲を指す。
if (window.getSelection){処理}は、選択範囲が存在するなら処理を実行。
・empty()
emptyメソッドは指定した要素の子要素を削除。対象の要素自体は削除しない。
・.removeAllRanges()
対象の選択範囲を解除する。window.getSelection().removeAllRanges()ですべての選択範囲を解除。
・document.activeElement
テキスト入力中の要素を返す。
inputタグやtextareaタグ内を選択している場合に、選択中の要素がわかる。
取得したデータの中には、対象のノード名やテキストの何文字目を入力中かなどのデータが入っている。
・document.activeEl.nodeName.toLowerCase()
現在テキスト入力中のノード名（nodename）を取得し、小文字に変換（toLowerCase）する。
・activeEl.selectionStart = activeEl.selectionEnd
選択中のテキストをなしにする。（始まり＝終わりにする）