[問題] 請問如何將contenteditable div的游標停在指定的位置

[banana2014 (香蕉共和國)]

[HTML]

<div id="main" contenteditable="true" style="border:solid 1px black">
    <div>Said Hamlet to Ophelia,</div>
    <div>I'll draw a sketch of thee,</div>
    <div>What kind of pencil shall I use?</div>
    <div>2B or not 2B?</div>
</div>
<button onclick="set_caret_pos()">Set caret position</button>




[Javascript]

function set_caret_pos(){
        var content=document.getElementById("main");
        var character = 4, sel; // character at which to place caret
        content.focus();
        if (document.selection) {
          sel = document.selection.createRange();
          sel.moveStart('character', character);
          sel.select();
        }
}

就像上面一樣，按一下按鈕就能將游標停在指定的位置(上例是停在第4字元)

但是上面的例子只適用於舊版的IE，其他瀏覽器就沒辦法如此了

請問該如何將游標停在指定的位置?(所有瀏覽器都能適用的方法)

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 219.80.137.190
※ 文章網址: https://www.ptt.cc/bbs/Ajax/M.1431608062.A.F6D.html
※ 編輯: banana2014 (219.80.137.190), 05/14/2015 21:01:02
※ banana2014:轉錄至看板 Web_Design                                05/14 21:51
推 clerkhsiao: Focus
推 mouse26: range and selection http://goo.gl/S38Feh
→ mouse26: 你只能舊IE一種做法 其他一種做法