內容編輯<span>標籤取消選擇鼠標按鈕釋放時

Question

我試圖使用內容可編輯的範圍標籤作爲可變寬度內嵌文本輸入框。一切工作正常，除非我專注於盒子時無法選擇整個文本。 Tabable to the editable span works works，but，但是當我點擊它時，鼠標移動事件似乎取消了我剛剛做出的選擇。我在Ubuntu上使用最新的谷歌瀏覽器。

http://jsfiddle.net/6b3tP/

這裏的HTML：

<div> 
    Inline editable <span contenteditable="true">spans</span> are hard to select. 
</div> 

而這裏的JS：

$('span').focus(function() { 
    var text_node = this.firstChild; 
    var text = $(this).text(); 
    var range = document.createRange(); 
    range.setStart(text_node, 0); 
    range.setEnd(text_node, text.length); 
    var sel = window.getSelection(); 
    sel.removeAllRanges(); 
    sel.addRange(range); 
}); 

Answer 1

我建議推遲做使用window.setTimeout()選擇，讓灰塵做前解決任何東西。你也可以簡化代碼。

演示：http://jsfiddle.net/6b3tP/1/

代碼：

$('span').focus(function() { 
    var span = this; 
    window.setTimeout(function() { 
     var range = document.createRange(); 
     range.selectNodeContents(span); 
     var sel = window.getSelection(); 
     sel.removeAllRanges(); 
     sel.addRange(range); 
    }, 1); 
});