Rumah > hujung hadapan web > tutorial js > Bagaimanakah Saya Boleh Memposisikan Kursor Secara Pengaturcaraan dalam Kotak Teks HTML?

Bagaimanakah Saya Boleh Memposisikan Kursor Secara Pengaturcaraan dalam Kotak Teks HTML?

DDD
Lepaskan: 2024-12-10 12:40:14
asal
1044 orang telah melayarinya

How Can I Programmatically Position the Cursor in an HTML Textbox?

Menempatkan Karet Papan Kekunci dalam Kotak Teks HTML

Untuk mengalihkan karet papan kekunci dalam kotak teks, kedudukan tertentu boleh disasarkan menggunakan JavaScript.

Generik Fungsi:

function setCaretPosition(elemId, caretPos) {
    var elem = document.getElementById(elemId);
    if (elem) {
        if (elem.createTextRange) {  // IE specific
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        } else if (elem.selectionStart) {
            elem.focus();
            elem.setSelectionRange(caretPos, caretPos);
        } else {
            elem.focus();  // Fallback for browsers not supporting setSelectionRange
        }
    }
}
Salin selepas log masuk

Penggunaan:

  • elemId: ID kotak teks untuk disasarkan
  • caretPos: Kedudukan caret yang diingini (watak dari permulaan)

Contoh:

Untuk menetapkan karet sebelum aksara 20 dalam kotak teks dengan 50 aksara:

setCaretPosition('myTextbox', 20);
Salin selepas log masuk

Keserasian:

  • Diuji pada IE6 , Firefox 2, Opera 8, Netscape 9, SeaMonkey dan Safari (kecuali Safari dalam kombinasi dengan onfocus)

Nota Tambahan:

Anda juga boleh memaksa karet untuk melompat ke penghujung semua kawasan teks pada fokus halaman menggunakan kod ini (dalam addLoadEvent fungsi):

for (var i = 0; i < textAreas.length; i++) {
    textAreas[i].onfocus = function() {
        setCaretPosition(this.id, this.value.length);
    }
}
Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memposisikan Kursor Secara Pengaturcaraan dalam Kotak Teks HTML?. 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