Bagaimana untuk Menetapkan Kedudukan Kursor dalam Kawasan Teks Menggunakan jQuery?

Menetapkan Kedudukan Kursor dalam Kawasan Teks dengan jQuery

Apabila anda mahu pengguna memfokus pada bahagian tertentu medan teks, anda mungkin perlu meletakkan kursor di offset tertentu dalam medan. Untuk mencapai ini menggunakan jQuery, anda boleh melaksanakan fungsi setCursorPosition.

$.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();
  }
};

Dengan fungsi ini disediakan, anda boleh menetapkan kedudukan kursor dengan memanggilnya dengan offset yang diingini:

$("#input").focus(function() {
  $(this).setCursorPosition(4);
});

Dalam contoh ini, apabila medan #input menerima fokus, kursor akan diletakkan selepas aksara keempat (mengira dari 0).

Pendekatan alternatif ialah menggunakan fungsi selectRange yang disediakan dalam jawapan yang diterima:

$.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();
    }
  });
};

Menggunakan fungsi ini, anda boleh meletakkan kursor dan memilih julat teks:

$("#elem").selectRange(3, 5); // select a range of text
$("#elem").selectRange(3); // set cursor position

Penyelesaian ini menyediakan pelbagai kaedah untuk menetapkan kedudukan kursor dan memanipulasi pemilihan teks dalam medan teks menggunakan jQuery.

Atas ialah kandungan terperinci Bagaimana untuk Menetapkan Kedudukan Kursor dalam Kawasan Teks Menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!