Bagaimanakah Saya Boleh Menangkap Ketukan Kekunci Anak Panah dalam JavaScript dan jQuery?

Merakam Ketukan Kekunci Anak Panah dengan JS dan jQuery

Fungsi mengikat pada kekunci anak panah dalam Javascript dan jQuery ialah keperluan biasa untuk navigasi papan kekunci. Walaupun pemalam js-hotkey untuk jQuery memanjangkan fungsi ikatan terbina dalam, ia tidak mempunyai sokongan untuk kekunci anak panah.

Untuk menangani perkara ini, berikut ialah penyelesaian yang mudah:

<code class="javascript">document.onkeydown = function(e) {
    switch(e.which) {
        case 37: // left
        break;

        case 38: // up
        break;

        case 39: // right
        break;

        case 40: // down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
};</code>

Kod ini menangkap ketukan kekunci untuk kekunci anak panah kiri, atas, kanan dan bawah menggunakan pernyataan suis. Anda boleh menentukan tindakan yang diingini dalam setiap kes.

Perhatikan bahawa untuk penyemak imbas yang tidak menyokong sifat yang mana (seperti IE8), ubah suai badan fungsi seperti berikut:

<code class="javascript">document.onkeydown = function(e) {
    e = e || window.event;
    switch(e.which || e.keyCode) {
        case 37: // left
        break;

        // ...
    }
};</code>

Sebagai alternatif, untuk penyemak imbas moden, sifat KeyboardEvent.key boleh digunakan untuk mengesan kekunci anak panah, seperti yang ditunjukkan dalam contoh ini:

<code class="javascript">document.onkeydown = function(e) {
    switch(e.key) {
        case "ArrowLeft": // left
        break;

        // ...
    }
};</code>

Dengan melaksanakan kod ini, anda boleh dengan mudah mengikat fungsi pada kekunci anak panah dalam JavaScript anda atau aplikasi jQuery.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menangkap Ketukan Kekunci Anak Panah dalam JavaScript dan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!