In JavaScript ist es möglich, Text in einem input
oder textarea
Element programmgesteuert auszuwählen . Sie können eine Eingabe mit fokussieren ipt.focus()
und dann ihren Inhalt mit auswählen ipt.select()
. Sie können sogar einen bestimmten Bereich mit auswählen ipt.setSelectionRange(from,to)
.
Meine Frage ist: Gibt es eine Möglichkeit, dies auch in einem contenteditable
Element zu tun ?
Ich habe festgestellt, dass ich elem.focus()
das Caret in ein contenteditable
Element einfügen kann , aber anschließend elem.select()
funktioniert das Laufen nicht (und auch nicht setSelectionRange
). Ich kann im Web nichts darüber finden, aber vielleicht suche ich nach dem Falschen ...
Wenn es einen Unterschied macht, muss es übrigens nur in Google Chrome funktionieren, da dies für eine Chrome-Erweiterung gilt.
quelle
selectElementContents()
einensetTimeout()
oder einen AnrufrequestAnimationFrame()
von einem anrufenonfocus
. Siehe jsfiddle.net/rudiedirkx/MgASG/1/showfocus()
.Zusätzlich zu Tim Downs Antwort habe ich eine Lösung entwickelt, die auch in oldIE funktioniert:
Getestet in IE 8+, Firefox 3+, Opera 9+ und Chrome 2+. Sogar ich habe es in einem jQuery-Plugin eingerichtet:
... und wer interessiert ist, hier ist das gleiche für alle Kaffee-Junkies:
Aktualisieren:
Wenn Sie die gesamte Seite oder den Inhalt eines bearbeitbaren Bereichs (gekennzeichnet mit
contentEditable
) auswählen möchten , können Sie dies viel einfacher tun, indem Sie zu Folgendem wechselndesignMode
und Folgendes verwendendocument.execCommand
:Es gibt einen guten Ausgangspunkt bei MDN und eine kleine Dokumentation .
(Funktioniert gut in IE6 +, Opera 9+, Firefoy 3+, Chrome 2+) http://caniuse.com/#search=execCommand
quelle
Da sich alle vorhandenen Antworten mit
div
Elementen befassen , werde ich erklären, wie es mitspan
s geht.Es gibt einen subtilen Unterschied bei der Auswahl eines Textbereichs in a
span
. Um den Textstart- und -endindex übergeben zu können, müssen Sie einenText
Knoten verwenden, wie hier beschrieben :quelle
r.setStart(e.firstChild,0); r.setEnd(e.lastChild,e.lastChild.textContent.length);
Natürlich sollten Sie überprüfen, ob e.firstChild tatsächlich nicht null ist.<div>
und einem<span>
Element. Zumindest nicht so, wie Sie es beschreiben.Mit Rangy können Sie diesen Cross-Browser mit demselben Code ausführen. Rangy ist eine browserübergreifende Implementierung der DOM-Methoden zur Auswahl. Es ist gut getestet und macht dies viel weniger schmerzhaft. Ich weigere mich, Contenteditable ohne es zu berühren.
Rangy finden Sie hier:
http://code.google.com/p/rangy/
Mit rangy in Ihrem Projekt können Sie dies immer schreiben, auch wenn der Browser IE 8 oder früher ist und eine völlig andere native API für die Auswahl hat:
Wobei "contentEditableNode" der DOM-Knoten ist, der das Attribut contenteditable hat. Sie könnten es so holen:
Oder wenn jQuery bereits Teil Ihres Projekts ist und Sie es bequem finden:
quelle
Die moderne Art, Dinge zu tun, ist so. Weitere Details zu MDN
quelle
[Aktualisiert, um Fehler zu beheben]
Hier ist ein Beispiel, das aus dieser Antwort übernommen wurde und in Chrome gut zu funktionieren scheint - Wählen Sie den Bereich in contenteditable div aus
HTML ist:
quelle