Selection インターフェイス
window.getSelection()
Document.getSelection()
Selection インターフェイスとは、テキストを選択状態にするための方法を定義したインターフェイスです。
テキストの選択状態とは、テキストをポインターデバイスを使って文章の一部を選択すると強調表示になる状態のことです。
console.log( getSelection().anchorNode );
詳しくは Example を参照してください
テキストの選択に関する Selection オブジェクトは、 window.getSelection() または Document.getSelection() で取得します。
このインターフェイスに、anchor と focus というフレーズがありますが、選択開始を anchor として扱い、選択終了を focus として扱っています。
選択開始位置が Node オブジェクトが示すテキスト中の何文字目かを anchorOffset で。選択終了位置が、その Node オブジェクトにおいて何文字目かを focusOffset で返します。選択範囲は range です。
ページ内 Index
プロパティ(Properties)
| Property | 概要 |
|---|---|
| .anchorNode | テキストの選択開始位置にある Node オブジェクトを返す |
| .anchorOffset | .anchorNode のテキストの先頭から何文字目までが選択されていないか |
| .focusNode | テキストの選択終了位置にある Node オブジェクトを返す |
| .focusOffset | .focusNode のテキストの先頭から何文字目までが選択されているか |
| .isCollapsed | テキストの選択開始位置と終了位置が同じであるか／否か。 Boolean 型で返す |
| .rangeCount | 選択数を返す |
| .type | 選択された方法をNone、Caret、Rangeというタイプ名で返す |
メソッド(Methods)
| Method | 概要 |
|---|---|
| .addRange() | Range オブジェクトに指定された範囲を追加する。詳しくは Range インターフェイスを参照 |
| .collapse() | 選択を解除。キャレットを指定の Node に留める。引数を指定しない場合は .removeAllRanges() と同じ |
| .extend() | 指定された Node の指定された数分だけ選択範囲を拡げる |
| .collapseToStart() | 選択範囲を解除しキャレットをその始点に移動 |
| .collapseToEnd() | 選択範囲を解除しキャレットをその終点に移動 |
| .selectAllChildren() | 指定 Node の全ての内容を選択 |
| .addRange(); | 選択範囲を拡げる。FireFoxのみ |
| .removeRange() | 引数に Range オブジェクトを指定。Range オブジェクト分を選択から除く |
| .removeAllRanges() | 選択を解除 |
| .deleteFromDocument() | 選択範囲を削除 |
| .toString() | Selection オブジェクトを文字列に変換。JavaScriptではなくても自動で文字列に変換される |
| .containsNode() | 指定 Node が含まれているかを Boolean 型で返す |
Example
編集不可能なコンテンツ
getSelection()の例です。以下のテキストを適当に選択し、選択状態を確かめる
ボタンをクリックして下さい。
編集可能なエレメント <textarea>
編集可能なエレメント <textarea> での getSelection() の動作の確認です。