Set cursor an das Ende des contenteditable div

Ich versuche, um den cursor zum Ende des nächsten/vorherigen tag contenteditable, wenn die aktuelle leer ist, aber wenn ich den Fokus, fügt es den Fokus auf den Anfang des Textes und nicht am Ende
Versucht, fast alle in Lösung auf, SO aber keiner schien zu funktionieren für mich. Hier der einfache code, den 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();
  }
dies ist viele Male beantwortet. werfen Sie einen Blick auf diesen thread: stackoverflow.com/questions/1125292/...
jsfiddle.net/dvH5r/3 plz finden Sie die Geige hier , mache ich etwas falsch. Schauen

InformationsquelleAutor Ross | 2012-11-22

  1. 14

    sind Sie mit jQuery und immer das element von jQuery. Müssen Sie es konvertieren in eine native DOM-element (über die jQuery-get-Funktion) zur Verwendung der "setCurserToEnd"-Funktion:

    Ihre Methode-Aufruf:

    setCursorToEnd(this.prev());

    funktionierende Lösung:

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

    finden Sie die aktualisierte fiddle: http://jsfiddle.net/dvH5r/4/

    Uups !! du hast Recht .. Danke
    Hallo. In Ihrem demo bei JSFiddle, warum es ist, dass ich nicht fügen Sie text in ein leeres div? Es deutet immer auf ein div vor.
    verstehe nicht, dass die Frage, funktioniert bei mir

    InformationsquelleAutor hereandnow78

  2. 2

    Waren Sie ziemlich nahe, das problem ist nur, das prev() gibt ein jQuery-Objekt, in der Erwägung, dass Sie wollen, passieren die eigentlichen DOM-element setCursorToEnd()

    Fertigen Produkt: http://jsfiddle.net/B5GuC/

    *Hinweis: dies funktioniert auch, wenn die oben genannten div-element ist leer. Vanilla 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;
}

    InformationsquelleAutor gkiely

  3. 0

    Seine ratsam, dass Sie die plugi jCaret als Browser sind weit unterschiedlichen in dies zu tun. Zum Beispiel können Sie abrufen, Ihre aktuelle position im Feld mit

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

    Könnte man dann einstellen Sie die position mit (nicht getestet)

    var endPos = $(this).caret().end;
$("input:text.hola").caret({start:endPos ,end:endPos });
    Thats cool, ein plugin für Sie. Dies wäre meine Letzte Möglichkeit, wenn sonst nichts funktioniert. Da will ich nicht hinzufügen zu viel code.
    jCaret nicht für diese Arbeit. Es ist konzipiert für text ein-und Texteingabefelder, nicht contenteditable Elemente.

    InformationsquelleAutor toxicate20

Schreibe einen Kommentar