JavaScriptの操作選択基準

簡単な紹介

選択は、現在動作するアクティブ選択した領域（すなわち、テキストを強調表示）です。

IE以外のブラウザ（Firefox、Safari、Chrome、Operaで使用することができます）window.getSelection（）オブジェクトの選択を取得するために、物品は、操作の方法は、標準的な選択であるについて説明します。以下からのテキストコンテンツのほとんどは https://developer.mozilla.org/en/DOM/Selection

用語

英語の文書数という点でいくつかの用語は以下のとおりです。

アンカー: 「開始点」の領域を選択します。
フォーカス: 「エンドポイント」エリアを選択します。
範囲: これは、ノードまたはテキストノードのうちのいくつかを含むフラグメント（HTMLフラグメント）です。通常の状況下では、同じ時間は、範囲内のページだけを有していてもよく、複数の範囲があるかもしれません（健康以上のものを選択するために、Ctrlキーを使用しますが、一部のブラウザでは、例えば、クロムはできません）。範囲選択を被験者から得ることができ、使用することができるdocument.createRange（）メソッドが得られます。

プロパティ

anchorNode: 戻り値ノードは、「開始点」が含まれています。
anchorOffset: anchorNodeのオフセットの「スタート地点」。
focusNode: 「エンドポイント」を含むノードを返します。
focusOffset: focusNodeの「エンドポイントは、」オフセット。
isCollapsed: 「開始ポイント」と「エンドポイント」一致しています。
Rngecount: オブジェクトの選択に含まれている番号の範囲は、複数の健康を持つことができますCtrlキーを使用して、一般的に範囲がある返します。

方法

getRangeAt（インデックス）

あなたは、現在の選択対象の範囲オブジェクトを取得します。
インデックス：参考rangeCountプロパティ。
戻り値：対応する範囲の添字インデックスに基づいてオブジェクトを返します。

崩壊（のparentNode、オフセット）

開始点と終了点は（オフセット）位置に対応する特定のノード（のparentNode）に合流します。
parentNode：フォーカス（キャレット）は、このノードになります。
オフセット範囲[0、1、2、3であるべきで、parentNode.childNodes.length]。

0：最初の子ノードを配置する前に。
1：2番目の子ノードの前に。
......
childNodes.length-1：現在のノードの最後の子。
childNodes.length：最後の子の後。

Mozillaの公式文書 0と1の述べた値の、テストは正確ではありません。文書は非常に明確ではありませんもあり、「文書が変更されていない。場合は、コンテンツが集中し、編集可能なされて、キャレットが点滅します。」

伸びる（のparentNode、オフセット）

指定されたノード（のparentNode）指定された位置（オフセット）の「エンドポイント」。
「開始点」方向に関係なく、「エンドポイント」領域を「開始点」から、新たな選択範囲を移動しない（新たな「エンドポイント」オリジナル「開始点」の前であってもよいです）。
parentNode：フォーカスがこのノード内であろう。
オフセット：最後の1、はparentNode; 0を、何よりものparentNode。

修正（変更、方向、粒度）

フォーカス位置を変更、または拡張|の大きさの選択絞り込む
ALTER：方法の変更を。フォーカスを移動させるため、「移動」、「伸びる」、選択を変更します。
方向：移動の方向。オプションの前方値| backwordまたは左|右
粒度：モバイルユニットまたはサイズ。オプションの値は、文字""言葉""文""ライン""段落"" lineboundary "" sentenceboundary "" paragraphboundary "または" documentboundary。 "
のFirefox 4 / Thunderbirdの3.3 / SeaMonkeyの2.1意志この機能をサポートし、公式文書： https://developer.mozilla.org/en/DOM/Selection/modify

collapseToStart（）

「エンドポイント」も、「開始点」のselction、より範囲を移動させます。

collapseToEnd（）

「開始点」は同様に、「エンドポイント」のselction、より範囲を移動させます。

selectAllChildren（のparentNode）

選択へのparentNode（のparentNode除く）ノードのすべての子孫は、元の選択にページが廃棄されます。

addRange（範囲）

選択は、複数の範囲になるように、それらに選択範囲を追加します。
クロームは、複数の範囲が同時に存在することはできませんので注意してください、それは少し違ったアプローチとFirefoxのです。

removeRange（範囲）

電流範囲の選択からオブジェクトを削除し、戻り値は未定義です。
範囲のパラメータがエラーになるように、あなたが（document.createRange（））を作成した場合、ChromeはFirefoxでさえ、現在のところ変更機能ではありません。
（）はoSelction.getRangeAtを取る場合は、それが与えられていません。

removeAllRanges（）

anchorNodeを行った後、focusNodeがnullに設定され、範囲内のすべてのオブジェクトの選択を削除し、選択されたいずれかのコンテンツが存在しません。

toString（）

ラベルが含まれていない、プレーンテキストの選択を返します。

containsNode（アノード、aPartlyContained）

ノードはselctionの一部であるかどうかを決定します。
陽極：ノードを確認します。
偽、アノードはすべての選択場合はtrueを返すように属している必要があります。限り、アノードがtrueを返すの選択に属するの一部があるとして、真：aPartlyContained。

document.activeElement

このプロパティは、それが返されない「体」は存在しない場合、要素は、現在フォーカスを持って返す、HTML5の一部です。通常の状況下では、「テキストフィールド」または戻り「テキストボックス」を「ドロップダウンリスト」を返すことも可能である、「ボタン」、「ラジオ」または「ラジオ・ボタン」など、Mac OSのシステムは、（テキストボックス、テキストフィールドとしてテキストボックス、）非入力要素を返さないことがあります。

プロパティとメソッド：

したselectionStart: 入力選択要素の位置を開始することは読み取ることができます。
selectionEndに: エンドポイントの選択要素の位置を入力し、読み取ることができます。
setSelectionRange（開始、終了）: そして、入力要素がしたselectionStart値selectionEndにして配置します

テキストボックスなし選択した場合、たselectionStartは等しいselectionEndに、フォーカス位置です。
setSelectionRangeを使用する場合は（）
の端部は、スタート未満で、かつたselectionStart selectionEndには終了するように設定されて話す場合は、
長さ（textbox.value.length）より大きい開始と終了パラメータテキストボックスの内容は、開始と終了がvalue属性の長さに設定されている場合。
それはしたselectionStartとselectionEndには要素がフォーカスを失った、とするときしたselectionStart selectionEndにの使用は、まだフォーカスを失った要素の値を取得することができることを意味し、最後の要素の選択の関連する属性を記録することを言及する価値があります。この機能が行われる可能性がある場合（式が焦点要素の最後の位置に挿入されている）非常に便利「という表現を挿入します。」

<TEXTAREA ID = "テキストボックス"> ABC中国EFG </ TEXTAREA> 
<スクリプトタイプ= "テキスト/ javascriptの"> 
window.onload =関数（）{ 
    VARテキストボックス=のdocument.getElementById（ 'テキストボックス'）; 
    textbox.setSelectionRange（5、2）。
    console.log（textbox.selectionStart）。// 2 
    にconsole.log（textbox.selectionEnd）。// 2 
}。
</ SCRIPT>

<TEXTAREA ID = "テキストボックス"> ABC中国EFG </ TEXTAREA> 
<スクリプトタイプ= "テキスト/ javascriptの"> 
window.onload =関数（）{ 
    VARテキストボックス=のdocument.getElementById（ 'テキストボックス'）; 
    textbox.setSelectionRange（9,9）。
    console.log（textbox.selectionStart）。// 8 
    にconsole.log（textbox.selectionEnd）。// 8 
}。
</ SCRIPT>

サポート：7 \ 8 \ IE6はサポートされていません。クロムは、Firefoxは、オペラ、Safariがサポートされています。

参照文献：https://developer.mozilla.org/en/DOM/document.activeElement

document.designMode = '上';

選択時「オン」document.designMode =が、したselectionStart、selectionEndにとは、オペラ、Firefoxの、サファリ、とChromeで使用されるかもしれないが、することはできません方法。

ます。https：//www.cnblogs.com/rainman/archive/2011/02/27/1966482.htmlで再現

簡単な紹介

用語

プロパティ

方法

document.activeElement

document.designMode = '上';

おすすめ