[解決済み】contenteditable要素（div）にキャレット（カーソル）の位置を設定する方法は？）

質問

このような簡単なHTMLを例にしています。

<div id="editable" contenteditable="true">
  text text text<br>
  text text text<br>
  text text text<br>
</div>
<button id="button">focus</button>

ボタンをクリックすると、編集可能なdivの特定の場所にキャレット（カーソル）を置きたいのですが、簡単なことです。ウェブで検索してみると、ボタンクリックにこのJSが添付されているのですが、うまくいきません（FF, Chrome)。

var range = document.createRange();
var myDiv = document.getElementById("editable");
range.setStart(myDiv, 5);
range.setEnd(myDiv, 5);

このようにキャレットの位置を手動で設定することは可能ですか？

解決方法を教えてください。

ほとんどのブラウザでは Range と Selection オブジェクトを作成します。選択範囲の境界をそれぞれノードとその中のオフセットで指定します。例えば、キャレットを2行目のテキストの5文字目に設定するには、次のようにします。

function setCaret() {
    var el = document.getElementById("editable")
    var range = document.createRange()
    var sel = window.getSelection()
    
    range.setStart(el.childNodes[2], 5)
    range.collapse(true)
    
    sel.removeAllRanges()
    sel.addRange(range)
}

<div id="editable" contenteditable="true">
  text text text<br>text text text<br>text text text<br>
</div>

<button id="button" onclick="setCaret()">focus</button>

IE < 9 は全く異なる動作をします。これらのブラウザをサポートする必要がある場合は、別のコードが必要になります。

jsFiddleの例です。 http://jsfiddle.net/timdown/vXnCM/