Setzen Sie den Fokus auf div contenteditable Element

Ich habe eine <div contenteditable=true> wo ich definieren, indem Sie einen WYSIWYG-einige Elemente. Zum Beispiel <p><h1> usw. Ich würde gerne direkt den Fokus auf eines dieser Elemente.

Beispielsweise auf <p id="p_test">. Aber es scheint, dass focus() - Funktion funktioniert nicht auf <div> Elemente <p> Elemente...

Gibt es eine andere Möglichkeit zu definieren, die den Fokus in meinem Fall?

InformationsquelleAutor der Frage sanceray3 | 2010-03-05

  1. 31

    Alte post, aber keine der Lösungen bei mir funktioniert. Ich dachte, es schlussendlich aber:

    var div = document.getElementById('contenteditablediv');
setTimeout(function() {
    div.focus();
}, 0);

    InformationsquelleAutor der Antwort chris97ong

  2. 30

    In modernen Browsern, die Sie verwenden können:

    var p = document.getElementById('contentEditableElementId'),
    s = window.getSelection(),
    r = document.createRange();
r.setStart(p, 0);
r.setEnd(p, 0);
s.removeAllRanges();
s.addRange(r);

    Aber wenn ein element leer ist, habe ich einige seltsame Probleme
    also für leere Elemente, die Sie dies tun können:

    var p = document.getElementById('contentEditableElementId'),
    s = window.getSelection(),
    r = document.createRange();
p.innerHTML = '\u00a0';
r.selectNodeContents(p);
s.removeAllRanges();
s.addRange(r);
document.execCommand('delete', false, null);

    Nach dem löschen nbsp cursor bleibt im p-element

    P. S. nur normale Platz nicht für mich arbeiten

    InformationsquelleAutor der Antwort Dima Vidmich

  3. 27

    Bemerkte ich, dass jQuery focus() funktionierte nicht für meine contenteditable DIV mit Breite und Höhe 0. Ich ersetzte es mit .get(0).focus() - die native javascript-focus-Methode - und es funktioniert.

    InformationsquelleAutor der Antwort Vlad

  4. 3

    Den Fall, dass jemand, der mit MediumEditor verwaltet contenteditable element, stößt auf das Problem, Folgendes hat bei mir funktioniert:

    editor.selectElement(editorDOMNode);
    1. editor ist eine Instanz von MediumEditor.
    2. editorDOMNode ist ein Verweis auf die eigentliche contenteditable DOM-Knoten.

    3. Ist es auch möglich, den Fokus auf einen bestimmten untergeordneten Knoten innerhalb des Editors wie folgt:

      editor.selectElement(editorDOMNode.childNodes[0]);

    InformationsquelleAutor der Antwort Eye

  5. 1

    Können Sie versuchen, diesen code, er kann auto-Fokus in der letzten insert-Position.

    let p = document.getElementById('contenteditablediv')
let s = window.getSelection()
let r = document.createRange()
r.setStart(p, p.childElementCount)
r.setEnd(p, p.childElementCount)
s.removeAllRanges()
s.addRange(r)

    InformationsquelleAutor der Antwort Surmon

  6. 0

    Eine Menge Zeit, wenn Sie können nicht nennen .focus() auf ein element, es ist, weil Sie die tabIndex-Eigenschaft den Wert -1, was bedeutet, dass der tab-Taste kann nicht auf Sie konzentrieren, wenn Sie durch drücken der Tabulatortaste zu navigieren.

    Ändern Ihres tabIndex - >= 0 wird, lassen Sie konzentrieren sich auf die Elemente. Wenn Sie brauchen, um es dynamisch ist, können Sie einfach fügen Sie ein tabindex - >= 0 ein element in der Ereignis-listener.

    InformationsquelleAutor der Antwort horsantula

  7. -6

    Binden Sie ein "Klick" - event-handler an alle Elemente innerhalb des contenteditable div, und ändern Sie die Klasse/Stil klicken Sie auf (D. H. hinzufügen der Klasse "ausgerichtet", um das element);

    Können Sie erkennen, an den Benutzer, welches element den Fokus hat, indem Stil, wie einen bunten Rahmen oder eine innere box-shadow. Dann, wenn Sie für den Zugriff auf das fokussierte element in der jQuery-script, nur etwas wie das hier tun:

    var focused = $('.focused');

    InformationsquelleAutor der Antwort Brian P Johnson

Schreibe einen Kommentar