Wie setzen Sie die Cursorposition in einem Textfeld mit jQuery? Ich habe ein Textfeld mit Inhalt und möchte, dass der Benutzercursor an einem bestimmten Versatz positioniert wird, wenn er sich auf das Feld konzentriert. Der Code sollte ungefähr so aussehen:
$('#input').focus(function() {
$(this).setCursorPosition(4);
});
Wie würde die Implementierung dieser setCursorPosition-Funktion aussehen? Wenn Sie ein Textfeld mit dem Inhalt abcdefg hätten, würde dieser Aufruf dazu führen, dass der Cursor wie folgt positioniert wird: abcd ** | ** efg.
Java hat eine ähnliche Funktion, setCaretPosition. Gibt es eine ähnliche Methode für Javascript?
Update: Ich habe den CMS-Code so geändert, dass er mit jQuery funktioniert:
new function($) {
$.fn.setCursorPosition = function(pos) {
if (this.setSelectionRange) {
this.setSelectionRange(pos, pos);
} else if (this.createTextRange) {
var range = this.createTextRange();
range.collapse(true);
if(pos < 0) {
pos = $(this).val().length + pos;
}
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
}(jQuery);
javascript
jquery
html
textfield
jcnnghm
quelle
quelle
$(this).get(0).setSelectionRange)
? Sie wissen, dass das genau das gleiche ist wiethis.setSelectionRange
, nur langsamer und schwerer zu lesen, oder? jQuery tut hier buchstäblich nichts für Sie.Antworten:
Ich habe zwei Funktionen:
Dann können Sie setCaretToPos wie folgt verwenden:
Live-Beispiel mit a
textarea
und aninput
, das die Verwendung von jQuery zeigt:Code-Snippet anzeigen
Ab 2016 getestet und mit Chrome, Firefox, IE11 und sogar IE8 (siehe das letzte hier ; Stack-Snippets unterstützen IE8 nicht).
quelle
textarea
(undinput
) für mich unter Chrome, Firefox, IE8 und IE11.Hier ist eine jQuery-Lösung:
Damit können Sie tun
quelle
selectRange($('.my_input')[0], 3, 5)
wenn Sie bereits jQuery verwenden. Außerdem sollte es mit mehr als einem Element funktionieren, wenn Sie dies aus irgendeinem Grund benötigen. Wenn Sie reine native möchten, verwenden Sie bitte die CMS-Lösung.$('#elem').focus()
vorher hinzufügen , damit der blinkende Cursor angezeigt wird.Die Lösungen hier sind bis auf den jQuery-Erweiterungscode richtig.
Die Erweiterungsfunktion sollte über jedes ausgewählte Element iterieren und
this
zur Unterstützung der Verkettung zurückkehren. Hier istdieeine korrekte Version:quelle
return this.each(function...)
und die eigenständige Leitung entfernen.Ich habe eine Lösung gefunden, die für mich funktioniert:
Jetzt können Sie den Fokus an das Ende eines Elements verschieben, indem Sie Folgendes aufrufen:
Oder Sie geben die Position an.
quelle
this.scrollTop(this[0].scrollHeight);
, um sicherzustellen, dass der Textbereich gescrollt wird , um die Einfügemarke sichtbar zu machen.Dies funktionierte für mich unter Safari 5 unter Mac OS X, jQuery 1.4:
quelle
Mir ist klar, dass dies ein sehr alter Beitrag ist, aber ich dachte, ich sollte vielleicht eine einfachere Lösung anbieten, um ihn nur mit jQuery zu aktualisieren.
Verwendung für die Verwendung von Strg-Enter zum Hinzufügen einer neuen Zeile (wie bei Facebook):
Ich bin offen für Kritik. Vielen Dank.
UPDATE: Diese Lösung ermöglicht nicht, dass normale Kopier- und Einfügefunktionen funktionieren (z. B. Strg-C, Strg-V). Daher muss ich diese in Zukunft bearbeiten, um sicherzustellen, dass der Teil wieder funktioniert. Wenn Sie eine Idee dazu haben, kommentieren Sie diese bitte hier, und ich werde sie gerne testen. Vielen Dank.
quelle
Im IE reicht dieser Code aus, um den Cursor an eine Position zu bewegen:
quelle
Ich benutze dies: http://plugins.jquery.com/project/jCaret
quelle
Stellen Sie den Fokus ein, bevor Sie den Text in den Textbereich eingefügt haben.
quelle
Das funktioniert bei mir in Chrom
Anscheinend benötigen Sie eine Verzögerung von einer Mikrosekunde oder mehr, da sich ein Benutzer normalerweise auf das Textfeld konzentriert, indem er auf eine Position im Textfeld klickt (oder auf die Registerkarte drückt), die Sie überschreiben möchten. Sie müssen also warten, bis die Position erreicht ist vom Benutzer festgelegt klicken und dann ändern.
quelle
Denken Sie daran, direkt nach dem Funktionsaufruf false zurückzugeben, wenn Sie die Pfeiltasten verwenden, da Chrome den Frack ansonsten auffrischt.
quelle
return false;
. Du willstevent.preventDefault();
stattdessen. Wenn Sie falsch zurückgeben, implizieren Sie,event.stopPropagation()
was nicht immer wünschenswert istBasierend auf dieser Frage funktioniert die Antwort nicht perfekt für dh und Oper, wenn es eine neue Zeile im Textbereich gibt. In der Antwort wird erläutert, wie Sie selectionStart, selectionEnd anpassen, bevor Sie setSelectionRange aufrufen.
Ich habe das adjustOffset aus der anderen Frage mit der von @AVProgrammer vorgeschlagenen Lösung ausprobiert und es funktioniert.
quelle
Kleine Änderung am Code, den ich in Bitbucket gefunden habe
Code kann jetzt mit Start- / Endpunkten auswählen / hervorheben, wenn 2 Positionen angegeben sind. Getestet und funktioniert gut in FF / Chrome / IE9 / Opera.
Der Code ist unten aufgeführt, nur wenige Zeilen geändert:
quelle
Ich musste dies für inhaltsbearbeitbare Elemente und jQuery zum Laufen bringen und dachte, jemand möchte, dass es einsatzbereit ist:
Die Verwendung
$(selector).getCaret()
gibt den$(selector).setCaret(num)
Zahlenversatz zurück, legt den Versatz fest und legt den Fokus auf das Element.Auch ein kleiner Tipp: Wenn Sie
$(selector).setCaret(num)
von der Konsole aus ausführen , wird das console.log zurückgegeben, aber Sie werden den Fokus nicht visualisieren, da er im Konsolenfenster eingerichtet ist.Bests; D.
quelle
Sie können den Prototyp direkt ändern, wenn setSelectionRange nicht vorhanden ist.
jsFiddle Link
quelle