JavaScriptで範囲/選択をプログラムで定義する際に、範囲内のfocusOffsetをanchorOffsetの前にすることはできませんか? では、右から左への選択をどのように定義すればよいでしょうか。
たとえば、JS フィドラー リンク: http://jsfiddle.net/johncch/ejVab/1/
JavaScriptで範囲/選択をプログラムで定義する際に、範囲内のfocusOffsetをanchorOffsetの前にすることはできませんか? では、右から左への選択をどのように定義すればよいでしょうか。
たとえば、JS フィドラー リンク: http://jsfiddle.net/johncch/ejVab/1/
「後方」の選択を作成する方法は、少しわかりにくいです。addRange()
範囲は本質的に方向がないため、selection メソッドを使用して単に Range を選択するだけでは実行できません。選択の方法を使用する必要がありますextend()
(以下の例)。
これは、9 を含む IE のどのバージョンでも機能しないことに注意してください。以前のバージョンとは異なり、IE 9 には標準の選択オブジェクトと範囲オブジェクトがありますが、Microsoft が IE 9 を開発していた当時extend()
は非標準であったため、実装しませんでした。つまり、まだリリースされている IE のどのバージョンでも、プログラムによって後方選択を作成する方法はありません。IEバグトラッカーにバグをextend()
報告したにもかかわらず、IE 10 は実装されませんでした。
function selectRangeBackwards(range) {
var sel = window.getSelection();
var endRange = range.cloneRange();
endRange.collapse(false);
sel.removeAllRanges();
sel.addRange(endRange);
sel.extend(range.startContainer, range.startOffset);
}
次に、2 つの変数を交換する必要があります。
function makeSelection(a, b) {
if(b < a) {
var tmpA = a;
a = b;
b = tmpA;
}
// ... rest of your code
jsfiddleデモを更新しました。
これは、選択に関する優れた MDN ドキュメントです。anchorOffset/anchorNode は、選択の「開始」(たとえば、マウスのドラッグ中に開始された場所) を示し、focusOffset/focusNode は、選択の「終了」(ユーザーがドラッグを終了した場所) を示します。これは、選択範囲の左端/右端を決定するのにはほとんど役に立ちません。それらを検出するには、Rangeオブジェクトが必要です。左側の選択境界には startContainer/startOffset を使用し、右側の境界には endContainer/endOffset を使用します。選択した範囲を次のように取得します
if (window.getSelection() && window.getSelection().rangeCount)
var range = window.getSelection().getRangeAt(0);
正しい選択を構築するにはこれで十分だと思います。