ドラッグである要素を選択したときに、その中の要素が選択状態になってしまう。この文字列の選択状態を解除する方法。
例えば、テーブルのセルをドラッグで複数選択すると下図のように、セルの中のテキストが選択されて見づらい。
↓ 実現したいこと（文字列は選択しないようにする）
主な実現方法は以下２つ。１が圧倒的に簡単。２は参考程度に。
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で選択解除
以下処理を実行することで選択状態を解除できる。
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
選択中のテキストをなしにする。（始まり＝終わりにする）