Ich habe eine <div contenteditable=true>, wo ich durch ein WYSIWYG einige Elemente definieren. Zum Beispiel <p>, <h1> usw. Ich möchte den Fokus direkt auf eines dieser Elemente legen.Set Fokus auf div contenteditable Element
Zum Beispiel auf <p id="p_test">. Aber es scheint, dass focus() Funktion funktioniert nicht auf <div> Elemente, <p> Elemente ...
Gibt es ein anderes Mittel, um den Fokus in meinem Fall zu definieren?
Bind ein „Klick“ Event-Handler für alle Elemente innerhalb des contenteditable div, und ändern Sie die Klasse/Stil auf klicken (das heißt hinzufügen Klasse „fokussiert“ auf das Element);
können Sie identifizieren, an den Benutzer, das Element durch Hinzufügen von Stil wie eine bunte Grenze oder einer inneren box-shadow Fokus hat. Dann, wenn Sie das fokussierte Element in Ihrem jQuery Skript zugreifen wollen, nur so etwas tun:
var focused = $('.focused');
Er fragt nach, ob er den Caret des Benutzers tatsächlich auf das Element verschiebt und nicht nur ausgewählte Elemente formatiert. –
Das ist keine Hilfe. –
Ich bemerkte, dass jQuery focus() nicht für meine contenteditable DIV mit einer Breite und Höhe von 0 arbeiten. Ich ersetzte es durch .get (0) .focus() - die native Javascript-Fokus-Methode - und es funktioniert.
Welcher Browser? Es scheint nicht in Safari zu funktionieren, aber Firefox und Chrome gehen gut damit um. –
Das ist super! Vielen Dank, dass Sie sich dieses Bild ausgedacht und es geteilt haben! – Rogala
eine Idee, wie dies in Vanille js funktionieren könnte? –
In modernen Browsern können Sie:
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 Ihr Element ist leer habe ich einige seltsame Probleme so 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 nbsp Cursor löschen bleibt innerhalb p Element
PS nur gewöhnliche Platz für mich nicht
Was ist die Variable p in Ihren Beispielen? –
@BT Ich nehme an, es ist das Wurzel-P-Element, obwohl er es geklärt haben sollte, ohne Raum für Zweifel zu lassen. –
Aus der Vielzahl der vorgeschlagenen Lösungen heraus, das ist die einzige, die für mich gearbeitet hat, um mir zu ermöglichen, konzentrieren sich auf eine zufrieden stellende div in einem jquery Dialog. –
Falls jemand, der MediumEditor nutzt funktioniert das contenteditable Element schafft, auf dieses Problem stolpert, hat die folgenden für mich gearbeitet:
editor.selectElement(editorDOMNode);
editor eine Instanz von MediumEditor.editorDOMNode ist eine Referenz auf den tatsächlichen contenteditable DOM-Knoten.Es ist auch möglich, an einem bestimmten untergeordneten Knoten im Editor zu konzentrieren, wie folgt:
editor.selectElement(editorDOMNode.childNodes[0]);
Alte Post, aber keine der Lösungen für mich gearbeitet. Ich fand es aber irgendwann heraus:
nicht sicher warum, das funktioniert total !!! das Umschließen der .focus() Logik in setTimeout hat den Trick gemacht !! Vielen Dank! – sga4
@ sga4 Froh, dass es geholfen hat :) – chris97ong
Schön! Manche Dinge müssen zum Scheduler zurückgehen, bevor sie richtig manipuliert werden können. Browser sind komisch. Vielen Dank! –
Sie können diesen Code versuchen, es kann Autofokus in Ihrem letzten Einsatzort.
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)
Sie können ein div oder p nicht fokussieren, da es keine Aktionen dafür gibt. Worauf konzentrieren Sie sich? –
kennt jemand einen Weg, dies zu tun? –
@NickCraver die Frage erwähnt seinen Inhalt editierbar, das heißt, Sie können es eingeben und bearbeiten usw.perfekt gültige Frage imo – Blowsie