Wie erhält man die Caret-Position in einem <textarea>
mit JavaScript?
Beispielsweise: This is| a text
Dies sollte zurückkehren 7
.
Wie würden Sie es bekommen, die Zeichenfolgen zurückzugeben, die den Cursor / die Auswahl umgeben?
ZB : 'This is', '', ' a text'
.
Wenn das Wort "ist" hervorgehoben ist, würde es zurückkehren 'This ', 'is', ' a text'
.
javascript
cursor
textarea
caret
Unruhiger Wanderer
quelle
quelle
textarea.selectionStart
,textarea. selectionEnd
,textarea.setSelectionRange
developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElementAntworten:
Mit Firefox, Safari (und anderen Gecko-basierten Browsern) können Sie textarea.selectionStart problemlos verwenden, aber für IE funktioniert das nicht, sodass Sie Folgendes tun müssen:
( vollständiger Code hier )
Ich empfehle Ihnen auch, das jQuery FieldSelection Plugin zu überprüfen. Es ermöglicht Ihnen dies und vieles mehr ...
Bearbeiten: Ich habe den obigen Code tatsächlich neu implementiert:
Hier finden Sie ein Beispiel hier .
quelle
Safari (and other Gecko based browsers)
Scheint zu implizieren, dass Safari Gecko verwendet. Gecko ist Mozillas Motor; Safari verwendet WebKit.if (el.selectionStart) { return el.selectionStart; }
...Aktualisiert am 5. September 2010
Da hier anscheinend alle für dieses Problem verwiesen werden, füge ich meine Antwort einer ähnlichen Frage hinzu, die denselben Code wie diese Antwort enthält, jedoch den vollständigen Hintergrund für diejenigen bietet, die interessiert sind:
Die document.selection.createRange des IE enthält keine führenden oder nachfolgenden Leerzeilen
Das Berücksichtigen von Zeilenumbrüchen ist im IE schwierig, und ich habe keine Lösung gefunden, die dies korrekt ausführt, einschließlich anderer Antworten auf diese Frage. Es ist jedoch möglich, die folgende Funktion zu verwenden, die Ihnen den Anfang und das Ende der Auswahl (die im Fall eines Carets gleich sind) innerhalb eines
<textarea>
oder eines Textes zurückgibt<input>
.Beachten Sie, dass der Textbereich den Fokus haben muss, damit diese Funktion im IE ordnungsgemäß funktioniert. Rufen Sie im Zweifelsfall
focus()
zuerst die Methode des Textbereichs auf .quelle
range && range.parentElement() == el
ist da, um zu testen, ob die Auswahl innerhalb des Textbereichs liegt und notwendig ist. Es gibt kein Problem mit der Funktion, die Caret-Position zu erhalten , solange der Textbereich den Fokus hat . Wenn Sie sich nicht sicher sind, rufen Sie vor dem Aufruf diefocus()
Methode des Textbereichs aufgetInputSelection()
. Ich werde der Antwort eine Notiz hinzufügen.mousedown
Ereignis oder das Hinzufügenunselectable="on"
zum<div>
Element.Ich habe die obige Funktion geändert, um Wagenrückläufe im IE zu berücksichtigen. Es ist ungetestet, aber ich habe etwas Ähnliches in meinem Code gemacht, damit es funktioniert.
quelle
Wenn Sie IE nicht unterstützen müssen, können Sie
selectionStart
undselectionEnd
Attribute von verwendentextarea
.Um die Caret-Position zu erhalten, verwenden Sie einfach
selectionStart
:Verwenden Sie den folgenden Code, um die Zeichenfolgen zu erhalten, die die Auswahl umgeben:
Demo auf JSFiddle .
Siehe auch HTMLTextAreaElement-Dokumente .
quelle