使用Javascript/jQuery的：如何在ID設置焦點內CONTENTEDITABLE

Question

我有以下的HTML：

<div id="content" contenteditable="true" style="font-family: Helvetica;"> 
    Some text 
    <div id="cursor" contenteditable="true"></div> 
    Some other text. 
</div> 

現在我想一些文字（恰好#cursor）後設置光標。我試過兩種方式：

$('#cursor').focus(); 
document.getElementById('#cursor').focus(); 

但它沒有工作。有沒有辦法做到這一點？

Answer 1

#content是外部編輯元素，所以你需要關注的是，並將光標移動內部#cursor，但由於#cursor沒有內容，沒有什麼目標的選擇。一個解決辦法是增加一些內容進行定位，就像一個textNode，移動插入符號，然後刪除該內容，就像這樣：

var el = document.getElementById("content"), 
    el2 = document.getElementById("cursor"), 
    range = document.createRange(), 
    sel = window.getSelection(); 

el2.innerHTML="temp"; 
var t = el2.childNodes[0]; 

range.setStartBefore(t); 
range.collapse(true); 
sel.removeAllRanges(); 
sel.addRange(range); 
el.focus(); 
el2.innerHTML = ""; 

FIDDLE