Heim >Web-Frontend >js-Tutorial >Wie stelle ich mit jQuery die Cursorposition ein oder wähle Text in einem Textbereich aus?

Wie stelle ich mit jQuery die Cursorposition ein oder wähle Text in einem Textbereich aus?

Barbara Streisand
Barbara StreisandOriginal
2024-12-15 13:35:14854Durchsuche

How to Set the Cursor Position or Select Text in a Text Area Using jQuery?

So legen Sie die Cursorposition in einem Textbereich mit jQuery fest

Mit der Funktion $.fn.selectRange() können Sie die Position einfach festlegen die Cursorposition oder wählen Sie mit jQuery einen Textbereich in einem Textbereich aus.

So können Sie es verwenden it:

$.fn.selectRange = function(start, end) {
    if(end === undefined) {
        end = start;
    }
    return this.each(function() {
        if('selectionStart' in this) {
            this.selectionStart = start;
            this.selectionEnd = end;
        } else if(this.setSelectionRange) {
            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();
        }
    });
};

Mit dieser Funktion können Sie die Cursorposition festlegen, indem Sie ein einzelnes Argument angeben, etwa so:

$('#elem').selectRange(3); // set cursor position

Oder Sie können einen Textbereich auswählen, indem Sie Folgendes angeben zwei Argumente:

$('#elem').selectRange(3,5); // select a range of text

Diese Funktion prüft, ob die Eigenschaften „selectionStart“ und „selectionEnd“ vom Browser unterstützt werden. Wenn dies der Fall ist, werden diese verwendet, um die Cursorposition oder den Auswahlbereich festzulegen. Andernfalls wird die Methode setSelectionRange() verwendet, die von den meisten Browsern unterstützt wird. Wenn schließlich keine dieser Methoden verfügbar ist, greift die Funktion auf die Methode createTextRange() zurück, die im Internet Explorer verfügbar ist.

Hier sind einige praktische Beispiele für die Verwendung dieser Funktion:

  • Gesamten Text in einem Textbereich auswählen:
$('#elem').selectRange(0, $('#elem').val().length);
  • Setzen Sie den Cursor an das Ende des Textes in einem Text Bereich:
$('#elem').selectRange($('#elem').val().length);
  • Wählen Sie einen bestimmten Textbereich in einem Textbereich aus:
$('#elem').selectRange(3, 7);

Live-Demos dieser Funktion finden Sie auf JsFiddle und JsBin.

Das obige ist der detaillierte Inhalt vonWie stelle ich mit jQuery die Cursorposition ein oder wähle Text in einem Textbereich aus?. 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