Impossible de définir la position du curseur dans le contenu div modifiable - Jquery

Question

Heres un code jquery, pour définir la position du curseur dans le contenu modifiable div à la position 10

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); 
} 

Mais ce ceux ne fonctionne pas. Quel est le problème . ??

Answer 1

Voici un exemple de travail. Cela ne semble pas fonctionner si je mets seulement du texte à l'intérieur du div, je dois mettre chaque personnage dans un élément. Notez également que vous devez utiliser .get (0) sur un objet jquery pour obtenir un objet dom à utiliser avec range.setStart et range.setEnd.

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/