【Javascript】contenteditableなdivでカーソル位置が指定できなかった原因
contenteditableなdivに「今日はいい天気だ」というテキストが存在して「は」の後ろ(前から3文字目)にカーソルを置きたかった。以下のようなコードで実験したけどなぜかカーソルが先頭にきてしまった。
<div id="editor" contenteditable="true"> 今日はいい天気だ </div> <script> window.onload = function() { var editor = document.getElementById('editor') var selection = window.getSelection() var range = document.createRange() range.setStart(editor.firstChild, 3) range.collapse(true) selection.removeAllRanges() selection.addRange(range) editor.focus() } </script>
原因は改行コードとスペースが含まれていたからそこも含めた位置だったというオチだった。。
<div id="editor" contenteditable="true">今日はいい天気だ</div>
ちなみにブラウザからスペースを挿入すると「 」が挿入されるので表示もスペースで表示される。以上です