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
Lepaskan: 2024-12-15 13:35:14
asal
854 orang telah melayarinya

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

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

$('#elem').selectRange(3); // set cursor position
Salin selepas log masuk

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

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

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);
Salin selepas log masuk
  • Tetapkan kursor ke penghujung teks dalam kawasan teks:
$('#elem').selectRange($('#elem').val().length);
Salin selepas log masuk
  • Pilih julat teks tertentu dalam kawasan teks:
$('#elem').selectRange(3, 7);
Salin selepas log masuk

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!

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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan