Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Menetapkan Kedudukan Kursor dalam Kawasan Teks Menggunakan jQuery?

Bagaimana untuk Menetapkan Kedudukan Kursor dalam Kawasan Teks Menggunakan jQuery?

DDD
Lepaskan: 2024-12-08 14:14:10
asal
763 orang telah melayarinya

How to Set the Cursor Position in Text Areas Using 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();
  }
};
Salin selepas log masuk

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

$("#input").focus(function() {
  $(this).setCursorPosition(4);
});
Salin selepas log masuk

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();
    }
  });
};
Salin selepas log masuk

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
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan