Setzen Sie den Cursor an das Ende der contenteditable div

Question

Ich versuche, den Cursor an das Ende der nächsten/vorherigen Contentable-Tag setzen, wenn die aktuelle leer ist, aber wenn ich den Fokus setzt fügt Fokus auf den Anfang des Textes und nicht Ende Versucht fast alle Lösung auf SO aber keiner schien für mich zu arbeiten. Hier ist der einfache Code Ich versuche

HTML CODE

<div id = 'main'> 
<div id = 'n1' contenteditable=true> Content one</div> 
<div id = 'n2' contenteditable=true> Content 2</div> 
<div id = 'n3' contenteditable=true> Content 3</div> 
<div id = 'n4' contenteditable=true> Content 4</div> 

JS CODE

$('#main div').keydown(function(){ 
if(!$(this).text().trim()){ 
    $(this).prev().focus(); 
    //setCursorToEnd(this.prev()) 
    } 
}); 


function setCursorToEnd(ele) 
    { 
    var range = document.createRange(); 
    var sel = window.getSelection(); 
    range.setStart(ele, 1); 
    range.collapse(true); 
    sel.removeAllRanges(); 
    sel.addRange(range); 
    ele.focus(); 
    } 

Answer 1

Sie mit jQuery und bekommen das Element von jQuery abrufen .

Ihre Methode-Aufruf:

setCursorToEnd(this.prev()); 

Arbeitslösung:

setCursorToEnd($(this).prev().get(0)); 

Sie müssen es in einem nativen DOM-Element konvertieren (über die jQuery-get-Funktion), um die "setCurserToEnd" -Funktion zu verwenden,

sehen die aktualisierte Geige: http://jsfiddle.net/dvH5r/4/

Answer 2

Seine ratsam, dass Sie verwenden, um den Plugi jCaret als Browser sind sehr verschieden dabei. Zum Beispiel können Sie Ihre aktuelle Position auf dem Feld mit

$("#myTextInput").bind("keydown keypress mousemove", function() { 
    alert("Current position: " + $(this).caret().start); 
}); 

Sie könnten dann legen Sie die Position unter Verwendung von (nicht getestet, obwohl)

var endPos = $(this).caret().end; 
$("input:text.hola").caret({start:endPos ,end:endPos }); 

Answer 3

Sie waren ziemlich nah dran, das einzige Problem ist, dass prev() ein jQuery-Objekt zurückgibt, während Sie den aktuellen DOM Verput übergeben mögen t bis setCursorToEnd()

Fertigprodukt: http://jsfiddle.net/B5GuC/

* Hinweis: Dies funktioniert auch, wenn das oben div Element ist leer. Vanille js ftw.

$('#main div').keydown(function(){ 
    if(!$(this).text().trim()){ 
     $(this).prev().focus(); 
     setCursorToEnd(getPrevSib(this)); 
    } 
}); 

function setCursorToEnd(ele){ 
    var range = document.createRange(); 
    var sel = window.getSelection(); 
    range.setStart(ele, 1); 
    range.collapse(true); 
    sel.removeAllRanges(); 
    sel.addRange(range); 
} 

function getPrevSib(n){ 
    //gets prev sibling excl whitespace || text nodes 
    var x=n.previousSibling; 
    while (x && x.nodeType!=1){ 
      x=x.previousSibling; 
    } 
    return x; 
}