【CSS・JS】テキストの選択を解除する方法。（文字列の選択を禁止する方法）

ドラッグである要素を選択したときに、その中の要素が選択状態になってしまう。この文字列の選択状態を解除する方法。

例えば、テーブルのセルをドラッグで複数選択すると下図のように、セルの中のテキストが選択されて見づらい。

↓ 実現したいこと（文字列は選択しないようにする）

主な実現方法は以下２つ。１が圧倒的に簡単。２は参考程度に。

1. cssでuser-selectプロパティの設定
2. JacaScriptで選択解除

##1. cssでuser-selectプロパティの設定 `user-select: none;`

対象の要素に上記を適用するとテキスト選択を解除できる。

コピペ防止でテキストの選択が全くできないページがあるが、その設定と同じ。

###user-selectプロパティのその他オプション
user-selectプロパティは、none以外にも選択できる値がある。

値	概要	詳細
none	選択禁止	対象要素とその子孫要素の文章を範囲選択できなくする
all	全選択	どれか一つの文字を選択するとすべて選択する。
text	テキスト選択可	デフォルトの状態
contain	要素の内部から選択	要素の内部から選択を始めることができます。しかし、選択範囲は要素の境界内のみに限定。
auto	要素の種類や親要素のプロパティにより変化	編集可能な要素の場合、使用値は containになる。親要素の user-select の使用値が all の場合、対象要素の使用値も all になる。など、

＞moz公式 user-select

▼user-select:all

##2. JSで選択解除 以下処理を実行することで選択状態を解除できる。

const clearSelection = () => {
  //旧IE
  var sel
  if ( sel = document.selection ) {
      sel.empty();
  }
  //旧IE以外のブラウザ 
  else {
      //選択解除
      if (window.getSelection) {
          window.getSelection().removeAllRanges();
      }
      //入力中のテキストボックスの選択解除
      var activeEl = document.activeElement;
      if (activeEl) {
          var tagName = activeEl.nodeName.toLowerCase();
          if ( tagName == "textarea" ||
                  (tagName == "input" && activeEl.type == "text") ) {
              // Collapse the selection to the end
              activeEl.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
選択中のテキストをなしにする。（始まり＝終わりにする）