JQuery/HTML5 -Eingangsfokus- und Cursorpositionen

Dieses Dokument enthält Code -Ausschnitte und Beispiele, die zeigen, wie der Cursoreingangsfokus und -position mit JQuery und HTML5 verwaltet werden. Feedback und Vorschläge sind willkommen.

jQuery Input Focus

Verwenden Sie die Funktion focus(), um den Fokus auf ein Eingabelement zu setzen:

// Set focus on input
$('input[name=firstName]').focus();

Siehe dies in Aktion unter https://www.php.cn/link/3f74a886c7f84169690962c497d4f30

html5 Eingabefokus

HTML5 bietet integrierte automatische Fokusfunktionen. Beachten Sie zwar weit verbreitet, dass es möglicherweise nicht über alle Browser funktioniert (getestet in Chrome und Firefox, jedoch nicht in IE9 oder älter).

<input type="text" autofocus>

Siehe dieses Beispiel unter https://www.php.cn/link/8bd045c0275185605e58d7fec40ecae6

jQuery Set Cursorposition

Diese JQuery -Funktion legt die Cursorposition in einem Eingangsfeld in einem bestimmten Zeichenindex fest:

// Set cursor position
$.fn.setCursorPosition = function(pos) {
  this.each(function(index, elem) {
    if (elem.setSelectionRange) {
      elem.setSelectionRange(pos, pos);
    } else if (elem.createTextRange) {
      var range = elem.createTextRange();
      range.collapse(true);
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
    }
  });
  return this;
};

Beispiel Verwendung: Legt die Cursorposition nach dem ersten Zeichen fest.

$('#username').setCursorPosition(1);

Siehe dieses Beispiel unter https://www.php.cn/link/5496f40877a2de2d20411a2266e86f523

jQuery Wählen Sie den Textbereich

Diese JQuery -Funktion wählt automatisch einen bestimmten Textbereich (eine Reihe von Zeichen) in einem Eingabefeld aus:

// Select text range
$.fn.selectRange = function(start, end) {
    return this.each(function() {
        if (this.setSelectionRange) {
            this.focus();
            this.setSelectionRange(start, end);
        } else if (this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true);
            range.moveEnd('character', end);
            range.moveStart('character', start);
            range.select();
        }
    });
};

Beispiel Verwendung: Wählt die ersten 5 Zeichen aus.

$('#username').selectRange(0, 5);

Siehe dieses Beispiel unter https://www.php.cn/link/c7410e5d6aa6b2f78ea7d9267b7908c2

häufig gestellte Fragen (FAQs)

Dieser Abschnitt befasst sich mit häufigen Fragen zu JQuery/HTML5 -Eingangsfokus und Cursorpositionierung. Die Antworten bieten präzise Code -Beispiele für Klarheit. (Hinweis: Der ursprüngliche FAQ -Abschnitt hatte einige Formatierende Inkonsistenzen und Codeblöcke, die nicht ordnungsgemäß als Code formatiert wurden. Diese Version korrigiert diese Probleme.)

F: Wie kann ich die Cursorposition am Ende des Eingangsfeldes mit JQuery?

festlegen

var input = $('#inputField');
var len = input.val().length;
input.focus();
input[0].setSelectionRange(len, len);

F: Wie kann ich JQuery verwenden, um sich auf ein Eingabefeld zu konzentrieren, wenn ein Link geklickt wird?

$('#linkID').click(function() {
  $('#inputField').focus();
});

F: Was ist der Unterschied zwischen den Ereignissen focus und focusin in jQuery?

focus wird ausgelöst, wenn ein Element Fokus empfängt und nicht sprudelt. focusin ist ähnlich, sprudelt aber den Dom.

F: Wie kann ich das Fokusereignis manuell in jQuery auslösen?

$('#inputField').focus(); // or $('#inputField').trigger('focus');

F: Wie kann ich erkennen, wann ein Eingabefeld den Fokus in jQuery verliert?

// Set focus on input
$('input[name=firstName]').focus();

F: Wie kann ich verhindern, dass ein Eingabefeld in jQuery den Fokus verliert?

Die Verwendung von preventDefault innerhalb eines focusout -Handlers wird im Allgemeinen nicht empfohlen, da dies zu unerwartetem Verhalten führen kann. Betrachten Sie alternative Ansätze, um Ihr gewünschtes Ergebnis zu erzielen.

F: Wie kann ich den Fokus auf das nächste Eingabefeld festlegen, wenn die Eingabetaste in jQuery gedrückt wird?

<input type="text" autofocus>

F: Wie kann ich die Cursorposition in einem Index in einem Eingabefeld mit JQuery?

festlegen

// Set cursor position
$.fn.setCursorPosition = function(pos) {
  this.each(function(index, elem) {
    if (elem.setSelectionRange) {
      elem.setSelectionRange(pos, pos);
    } else if (elem.createTextRange) {
      var range = elem.createTextRange();
      range.collapse(true);
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
    }
  });
  return this;
};

F: Wie kann ich die aktuelle Cursorposition in einem Eingangsfeld mit JQuery?

bekommen

$('#username').setCursorPosition(1);

F: Wie kann ich den Cursor mit JQuery auf den Beginn eines Eingabefeldes verschieben?

// Select text range
$.fn.selectRange = function(start, end) {
    return this.each(function() {
        if (this.setSelectionRange) {
            this.focus();
            this.setSelectionRange(start, end);
        } else if (this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true);
            range.moveEnd('character', end);
            range.moveStart('character', start);
            range.select();
        }
    });
};

Das obige ist der detaillierte Inhalt vonJQuery/HTML5 -Eingangsfokus- und Cursorpositionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!