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

Bagaimana untuk Menetapkan Kedudukan Kursor atau Pilih Teks dalam Kawasan Teks Menggunakan jQuery?

Barbara Streisand
Barbara Streisandasal
2024-12-15 13:35:14859semak imbas

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

Cara Menetapkan Kedudukan Kursor dalam Kawasan Teks Menggunakan jQuery

Fungsi $.fn.selectRange() membolehkan anda menetapkan dengan mudah kedudukan kursor atau pilih julat teks dalam kawasan teks menggunakan jQuery.

Begini cara anda boleh menggunakan ia:

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

Dengan fungsi ini, anda boleh menetapkan kedudukan kursor dengan menyediakan satu hujah, seperti:

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

Atau, anda boleh memilih julat teks dengan menyediakan dua hujah:

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

Fungsi ini berfungsi dengan menyemak sama ada sifat selectionStart dan selectionEnd disokong oleh penyemak imbas. Jika ya, ia menggunakannya untuk menetapkan kedudukan kursor atau julat pilihan. Jika tidak, ia menggunakan kaedah setSelectionRange(), yang disokong oleh kebanyakan pelayar. Akhir sekali, jika kedua-dua kaedah tersebut tidak tersedia, fungsi akan kembali menggunakan kaedah createTextRange(), yang tersedia dalam Internet Explorer.

Berikut ialah beberapa contoh berguna tentang cara menggunakan fungsi ini:

  • Pilih semua teks dalam kawasan teks:
$('#elem').selectRange(0, $('#elem').val().length);
  • Tetapkan kursor ke penghujung teks dalam kawasan teks:
$('#elem').selectRange($('#elem').val().length);
  • Pilih julat teks tertentu dalam kawasan teks:
$('#elem').selectRange(3, 7);

Anda boleh menemui tunjuk cara langsung fungsi ini pada JsFiddle dan JsBin.

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

Kenyataan:
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