Festlegen der Position der Einfügemarke in einem HTML-Textfeld

Question

Weiß jemand, wie man den Tastatur-Cursor in einem Textfeld an eine bestimmte Position verschiebt?

Wenn ein Textfeld (z. B. ein Eingabeelement, kein Textbereich) beispielsweise 50 Zeichen enthält und ich den Cursor vor Zeichen 20 positionieren möchte, wie würde ich vorgehen?

Dies steht in Abgrenzung zu dieser Frage: jQuery Cursor-Position im Textbereich festlegen die jQuery erfordert.

Answer 1

Auszug aus dem Buch von Josh Stodola Einstellen der Position der Einfügemarke in einer Textbox oder TextArea mit Javascript

Eine allgemeine Funktion, mit der Sie die Einfügemarke an jeder beliebigen Stelle eines Textfeldes oder einer Textarea einfügen können, die Sie wünschen:

function setCaretPosition(elemId, caretPos) {
    var elem = document.getElementById(elemId);

    if(elem != null) {
        if(elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        }
        else {
            if(elem.selectionStart) {
                elem.focus();
                elem.setSelectionRange(caretPos, caretPos);
            }
            else
                elem.focus();
        }
    }
}

Der erste erwartete Parameter ist die ID des Elements, in das Sie die Einfügemarke einfügen möchten. Wenn das Element nicht gefunden werden kann, passiert (natürlich) nichts. Der zweite Parameter ist der Index der Einfügeposition. Bei Null wird die Einfügemarke am Anfang eingefügt. Wenn Sie eine Zahl übergeben, die größer ist als die Anzahl der Zeichen im Wert des Elements, wird die Einfügemarke am Ende eingefügt.

Getestet mit IE6 und höher, Firefox 2, Opera 8, Netscape 9, SeaMonkey und Safari. Leider funktioniert es bei Safari nicht in Kombination mit dem onfocus-Ereignis).

Ein Beispiel für die Verwendung der obigen Funktion, um den Tastaturcursor zu zwingen, an das Ende aller Textbereiche auf der Seite zu springen, wenn sie den Fokus erhalten:

function addLoadEvent(func) {
    if(typeof window.onload != 'function') {
        window.onload = func;
    }
    else {
        if(func) {
            var oldLoad = window.onload;

            window.onload = function() {
                if(oldLoad)
                        oldLoad();

                func();
            }
        }
    }
}

// The setCaretPosition function belongs right here!

function setTextAreasOnFocus() {
/***
 * This function will force the keyboard caret to be positioned
 * at the end of all textareas when they receive focus.
 */
    var textAreas = document.getElementsByTagName('textarea');

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

    textAreas = null;
}

addLoadEvent(setTextAreasOnFocus);

Answer 2

Der Link in der Antwort ist defekt, dieser sollte funktionieren (alle Credits gehen an blog.vishalon.net ) :

http://snipplr.com/view/5144/getset-cursor-in-html-textarea/

Für den Fall, dass der Code wieder verloren geht, sind hier die beiden Hauptfunktionen aufgeführt:

function doGetCaretPosition(ctrl)
{
 var CaretPos = 0;

 if (ctrl.selectionStart || ctrl.selectionStart == 0)
 {// Standard.
  CaretPos = ctrl.selectionStart;
 }
 else if (document.selection)
 {// Legacy IE
  ctrl.focus ();
  var Sel = document.selection.createRange ();
  Sel.moveStart ('character', -ctrl.value.length);
  CaretPos = Sel.text.length;
 }

 return (CaretPos);
}

function setCaretPosition(ctrl,pos)
{
 if (ctrl.setSelectionRange)
 {
  ctrl.focus();
  ctrl.setSelectionRange(pos,pos);
 }
 else if (ctrl.createTextRange)
 {
  var range = ctrl.createTextRange();
  range.collapse(true);
  range.moveEnd('character', pos);
  range.moveStart('character', pos);
  range.select();
 }
}

Answer 3

Da ich diese Lösung wirklich brauchte, und die typische Basislösung ( die Eingabe fokussieren - dann den Wert gleich sich selbst setzen ) funktioniert nicht browserübergreifend Ich habe einige Zeit damit verbracht, alles zu optimieren und zu bearbeiten, damit es funktioniert. Aufbauend auf @ kd7 Hier ist, was ich mir ausgedacht habe.

Viel Spaß! Funktioniert in IE6+, Firefox, Chrome, Safari, Opera

Browserübergreifende Cursor-Positionierungstechnik (Beispiel: Bewegen des Cursors zum ENDE)

// ** USEAGE ** (returns a boolean true/false if it worked or not)
// Parameters ( Id_of_element, caretPosition_you_want)

setCaretPosition('IDHERE', 10); // example

Das Fleisch und die Kartoffeln sind im Grunde @ kd7 setCaretPosition, wobei die größte Änderung darin besteht if (el.selectionStart || el.selectionStart === 0) In Firefox beginnt die Auswahl bei 0 was in boolean natürlich zu False wird, also wurde es dort gebrochen.

Bei Chrom war das größte Problem, dass man es nur .focus() war nicht genug (er wählte immer den gesamten Text aus!). Daher setzten wir den Wert von selbst auf selbst el.value = el.value; vor dem Aufruf unserer Funktion, und jetzt hat sie einen Griff & Position mit der Eingabe zu verwenden AuswahlStart .

function setCaretPosition(elemId, caretPos) {
    var el = document.getElementById(elemId);

    el.value = el.value;
    // ^ this is used to not only get "focus", but
    // to make sure we don't have it everything -selected-
    // (it causes an issue in chrome, and having it doesn't hurt any other browser)

    if (el !== null) {

        if (el.createTextRange) {
            var range = el.createTextRange();
            range.move('character', caretPos);
            range.select();
            return true;
        }

        else {
            // (el.selectionStart === 0 added for Firefox bug)
            if (el.selectionStart || el.selectionStart === 0) {
                el.focus();
                el.setSelectionRange(caretPos, caretPos);
                return true;
            }

            else  { // fail city, fortunately this never happens (as far as I've tested) :)
                el.focus();
                return false;
            }
        }
    }
}

Answer 4

Ich habe eine einfache Möglichkeit gefunden, dieses Problem zu beheben, getestet in IE und Chrome:

function setCaret(elemId, caret)
 {
   var elem = document.getElementById(elemId);
   elem.setSelectionRange(caret, caret);
 }

Übergeben Sie dieser Funktion die Textfeld-ID und die Cursorposition.

Answer 5

Ich habe die Antwort von kd7 ein wenig angepasst, weil elem.selectionStart auf false ausgewertet wird, wenn der selectionStart zufällig 0 ist.

function setCaretPosition(elem, caretPos) {
    var range;

    if (elem.createTextRange) {
        range = elem.createTextRange();
        range.move('character', caretPos);
        range.select();
    } else {
        elem.focus();
        if (elem.selectionStart !== undefined) {
            elem.setSelectionRange(caretPos, caretPos);
        }
    }
}