Ich möchte eine einfache Funktion erstellen, die Text in einen Textbereich an der Cursorposition des Benutzers einfügt. Es muss eine saubere Funktion sein. Nur die Grundlagen. Ich kann den Rest herausfinden.
javascript
textarea
JoshMWilliams
quelle
quelle
Antworten:
quelle
} else {
myField.selectionStart = startPos + myValue.length;
myField.selectionEnd = startPos + myValue.length;
selectionStart
ist ein numerischer Wert und sollte daher mit0
und nicht verglichen'0'
werden und sollte wahrscheinlich===
Dieses Snippet könnte Ihnen dabei in einigen Zeilen von jQuery 1.9+ helfen: http://jsfiddle.net/4MBUG/2/
quelle
Für das richtige Javascript
quelle
this.value = ...
. Gibt es eine Möglichkeit, es zu bewahren?Neue Antwort:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setRangeText
Ich bin mir jedoch nicht sicher, ob der Browser dies unterstützt.
Alte Antwort:
Eine reine JS-Modifikation von Erik Pukinskis 'Antwort:
Wenn Sie den Wert des aktuell ausgewählten Texts ändern möchten, während Sie in dasselbe Feld eingeben (für eine automatische Vervollständigung oder einen ähnlichen Effekt), übergeben Sie
document.activeElement
als ersten Parameter.Es ist nicht die eleganteste Art, dies zu tun, aber es ist ziemlich einfach.
Beispielverwendungen:
quelle
Version 54.0.2813.0 canary (64-bit)
Chrome Canary 54.0.2813.0. Wenn Sie möchten, dass es nach ID in das Textfeld eingefügt wird, verwenden Sie esdocument.getElementById('insertyourIDhere')
anstelle vonel
in der Funktion.Erik Pukinskis
. Ich werde die Antwort aktualisieren, um dies besser widerzuspiegeln.Eine einfache Lösung, die auf Firefox, Chrome, Opera, Safari und Edge funktioniert, aber wahrscheinlich nicht auf alten IE-Browsern funktioniert.
setRangeText
Mit dieser Funktion können Sie die aktuelle Auswahl durch den bereitgestellten Text ersetzen. Wenn keine Auswahl vorhanden ist, fügen Sie den Text an der Cursorposition ein. Soweit ich weiß, wird es nur von Firefox unterstützt.Für andere Browser gibt es den Befehl "insertText", der sich nur auf das aktuell fokussierte HTML-Element auswirkt und dasselbe Verhalten wie hat
setRangeText
Teilweise inspiriert von diesem Artikel
quelle
execCommand
es jedoch, weil es Insert-Text-Textarea unterstütztundo
und erstellt hat . Keine IE-Unterstützung, aber kleinerexecCommand
von MDN leider als veraltet angesehen: developer.mozilla.org/en-US/docs/Web/API/Document/execCommand Ich weiß nicht warum, es scheint wirklich nützlich zu sein!Rabs Antwort funktioniert gut, aber nicht für Microsoft Edge. Deshalb habe ich auch eine kleine Anpassung für Edge hinzugefügt:
https://jsfiddle.net/et9borp4/
quelle
Ich mag einfaches Javascript und habe normalerweise jQuery in der Nähe. Folgendes habe ich mir ausgedacht , basierend auf mparkuk's :
Hier ist eine Demo: http://codepen.io/erikpukinskis/pen/EjaaMY?editors=101
quelle