Bagaimanakah Saya Boleh Meletakkan Karet Papan Kekunci Secara Pengaturcaraan dalam Kotak Teks?

Teknik Meletakkan Karet Papan Kekunci dalam Kotak Teks

Menggerakkan karet papan kekunci ke lokasi tertentu dalam kotak teks boleh meningkatkan interaksi dan pengeditan pengguna kecekapan. Untuk mencapai matlamat ini, pelbagai kaedah disediakan.

Fungsi Penentududukan Karet Generik

Dipetik daripada artikel Josh Stodola, fungsi berikut menawarkan penyelesaian serba boleh untuk menetapkan kedudukan karet dalam kedua-dua kotak teks dan kawasan teks:

function setCaretPosition(elemId, caretPos) {
    var elem = document.getElementById(elemId);

    if (elem != null) {
        if (elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        } else {
            if (elem.selectionStart) {
                elem.focus();
                elem.setSelectionRange(caretPos, caretPos);
            } else
                elem.focus();
        }
    }
}

Fungsi ini mengambil dua parameter: ID bagi elemen sasaran dan kedudukan karet yang dikehendaki. Melepasi sifar sebagai kedudukan karet akan menetapkannya ke permulaan teks dan melebihi panjang nilai elemen akan meletakkannya di penghujung.

Contoh Penggunaan

Contoh yang disediakan menggambarkan cara untuk memaksa karet papan kekunci melompat ke penghujung semua kawasan teks pada halaman apabila mereka menerima fokus:

function setTextAreasOnFocus() {
    var textAreas = document.getElementsByTagName('textarea');

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

    textAreas = null;
}

addLoadEvent(setTextAreasOnFocus);

Kod ini dengan berkesan meletakkan karet pada penghujung semua kawasan teks kerana ia menerima fokus, memudahkan penyuntingan teks dan penyiapan borang.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Meletakkan Karet Papan Kekunci Secara Pengaturcaraan dalam Kotak Teks?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!