Heim >Web-Frontend >js-Tutorial >Wie kann ich den Cursor programmgesteuert in einem HTML-Textfeld positionieren?

Wie kann ich den Cursor programmgesteuert in einem HTML-Textfeld positionieren?

DDD
DDDOriginal
2024-12-10 12:40:141087Durchsuche

How Can I Programmatically Position the Cursor in an HTML Textbox?

Tastatur-Einfügemarke in HTML-Textfeldern positionieren

Um die Tastatur-Einfügemarke innerhalb eines Textfelds zu verschieben, kann mithilfe von JavaScript eine bestimmte Position festgelegt werden.

Generisch Funktion:

function setCaretPosition(elemId, caretPos) {
    var elem = document.getElementById(elemId);
    if (elem) {
        if (elem.createTextRange) {  // IE specific
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        } else if (elem.selectionStart) {
            elem.focus();
            elem.setSelectionRange(caretPos, caretPos);
        } else {
            elem.focus();  // Fallback for browsers not supporting setSelectionRange
        }
    }
}

Verwendung:

  • elemId: ID des Textfelds, auf das abgezielt werden soll
  • caretPos: Gewünschte Caret-Position (Zeichen aus dem Anfang)

Beispiel:

So setzen Sie das Caretzeichen vor Zeichen 20 in einem Textfeld mit 50 Zeichen:

setCaretPosition('myTextbox', 20);

Kompatibilität:

  • Getestet auf IE6, Firefox 2, Opera 8, Netscape 9, SeaMonkey und Safari (außer Safari in Kombination mit Onfocus)

Zusätzliche Hinweise:

Sie können das auch erzwingen Caret, um mit diesem Code (innerhalb der addLoadEvent-Funktion) zum Ende aller Textbereiche im Seitenfokus zu springen:

for (var i = 0; i < textAreas.length; i++) {
    textAreas[i].onfocus = function() {
        setCaretPosition(this.id, this.value.length);
    }
}

Das obige ist der detaillierte Inhalt vonWie kann ich den Cursor programmgesteuert in einem HTML-Textfeld positionieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn