0

次のコードを検討してください。

<div contenteditable="true">One two th|ree <span>four</span> five six seven</div>

キャレット (点滅カーソル) が文字 "h" と "r" の間の単語 "three" に置かれていると想像してみましょう。単語の先頭と末尾の位置を取得するための最良の (クロスブラウザ) 方法は何ですか?

私の目標は、キャレットが単語の先頭または末尾に近いかどうかを判断し、キャレットを近い方に移動することです。したがって、提供された例では、キャレットをここに移動する必要があります。

<div contenteditable="true">One two |three <span>four</span> five six seven</div>

クロスブラウザー (Opera と IE を含む) ソリューションがあれば最高です。

4

1 に答える 1

1

私の Rangy ライブラリのTextRange モジュールを使用できます。

デモ: http://jsfiddle.net/8yU2G/

コード：

var editableDiv = document.getElementById("yourDivId");
var sel = rangy.getSelection();
var selRange = sel.getRangeAt(0);
var originalCharRange = selRange.toCharacterRange(editableDiv);
selRange.expand("word");
var expandedCharRange = selRange.toCharacterRange(editableDiv);

// originalCharRange and expandedCharRange have properties "start" and "end"
于 2013-06-07T08:52:56.637 に答える