Bagaimanakah cara saya Mengikat Kekunci Anak Panah dalam JavaScript dan jQuery?

Kekunci Anak Panah Pengikat Kekunci dalam JavaScript dan jQuery

Meningkatkan interaksi pengguna selalunya memerlukan fungsi pengikatan pada kunci tertentu. Kekunci anak panah biasanya digunakan untuk navigasi, tetapi ia boleh menjadi satu cabaran untuk disepadukan ke dalam JavaScript dan jQuery.

Penyelesaian jQuery

Manakala pemalam js-hotkey menawarkan pengikat kekunci yang dipertingkatkan keupayaan, ia tidak mempunyai sokongan untuk kekunci anak panah. Walau bagaimanapun, pengendali acara keydown jQuery menyediakan penyelesaian alternatif.

<code class="js">$(document).keydown(function(e) {
    switch (e.which) {
        case 37: // Left
            // Insert your left arrow key code
            break;
        case 38: // Up
            // Insert your up arrow key code
            break;
        case 39: // Right
            // Insert your right arrow key code
            break;
        case 40: // Down
            // Insert your down arrow key code
            break;
    }
    e.preventDefault();
});</code>

Penyelesaian JavaScript Tulen

Menggunakan acara onkeydown JavaScript ialah pendekatan lain untuk mengikat kekunci anak panah.

<code class="js">document.onkeydown = function(e) {
    switch (e.which) {
        case 37: // Left
            // Insert your left arrow key code
            break;
        case 38: // Up
            // Insert your up arrow key code
            break;
        case 39: // Right
            // Insert your right arrow key code
            break;
        case 40: // Down
            // Insert your down arrow key code
            break;
    }
    e.preventDefault();
};</code>

Keserasian Merentas Pelayar

Untuk keserasian dengan penyemak imbas lama seperti IE8, tambah e = e || tingkap.acara; suis(e.which || e.keyCode) { sebelum badan fungsi.

Penyelesaian Moden

KeyboardEvent.yang kini ditamatkan. Pendekatan yang lebih moden ialah menggunakan KeyboardEvent.key:

<code class="js">document.addEventListener('keydown', function(e) {
    switch (e.key) {
        case 'ArrowLeft':
            // Insert your left arrow key code
            break;
        case 'ArrowUp':
            // Insert your up arrow key code
            break;
        case 'ArrowRight':
            // Insert your right arrow key code
            break;
        case 'ArrowDown':
            // Insert your down arrow key code
            break;
    }
    e.preventDefault();
});</code>

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