2013-04-13 148 views
3

繼承人jQuery代碼,設置在內容編輯DIV光標位置定位10無法設置光標位置在內容編輯格 - Jquery的

var range,selection; var contentEditableElement = $("div#editMe"); 
if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+ 
{ 
range = document.createRange(); 
range.selectNodeContents(contentEditableElement); 
range.collapse(true); 
range.setStart(contentEditableElement,0); 
range.setEnd(contentEditableElement,10); 
selection = window.getSelection(); 
selection.removeAllRanges(); 
selection.addRange(range); 
} 

但這那些不工作。有什麼問題 。 ??

回答

2

這是一個工作示例。它似乎沒有工作,如果我只把文本里面的div,我必須把每個單獨的字符每個元素。另外請注意,您必須在jquery對象上使用.get(0)才能實際獲得與range.setStart和range.setEnd一起使用的dom對象。

HTML:

<div id="editMe"> 
    <span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span> 
</div> 

<button onclick="do_select()"> 
    select characters 
</button> 

JS:

function do_select() 
{ 
    var element = $("div#editMe").get(0); 
    var range = document.createRange(); 

    range.collapse(true); 
    range.setStart(element,0); 
    range.setEnd(element,10); 

    var selection = window.getSelection(); 
    selection.removeAllRanges(); 
    selection.addRange(range); 
} 

http://jsfiddle.net/y8pWs/