window.getSelection() から取得できる選択オブジェクトを利用したいと思います。したがって、私の最初の試みは、getRangeAt() から返された範囲を、addRange() を使用して選択範囲に適用できるかどうかを確認することです。
以下の jsfiddle を参照してください。これは、何も変更せずに getSelection() から範囲を保存して復元しようとするだけです。
var selection = window.getSelection()
$('#textfield').keyup(function() {
var range = selection.getRangeAt(0)
selection.removeAllRanges()
selection.addRange(range)
})
最初は問題ないように見え、自然に動作しますが、長い行を入力すると単語が折り返され、折り返された行の近くの左矢印キーはキャレットを前の行に適切に移動せず、跳ね返ります。
aaaaaa
^aaaaaa
(original caret(^) at end of the second line)
aaaaa^
aaaaa
(moved the caret by pressing left arrow key)
aaaaa
^aaaaa
(the caret immediately bounced back to the second line)
この効果は Firefox で表示できます (私の場合は FF 16 です)。
これは既知のバグですか? または、私が誤用したものはありますか?Chrome は問題なく動作しているようです。