Bagaimana saya mendeteksi ketika salah satu tombol panah ditekan? Saya menggunakan ini untuk mencari tahu:

function checkKey(e) {
    var event = window.event ? window.event : e;
    console.log(event.keyCode)
}

Meskipun bekerja untuk setiap tombol lainnya, itu tidak untuk tombol panah (mungkin karena browser seharusnya menggulir pada tombol-tombol ini secara default).

Tombol panah hanya dipicu oleh onkeydown, bukan onkeypress.

Kode kunci adalah:

• kiri = 37
• naik = 38
• benar = 39
• turun = 40

Fungsi panggilan naik dan turun. Ada kode berbeda untuk setiap tombol.

document.onkeydown = checkKey;

function checkKey(e) {

    e = e || window.event;

    if (e.keyCode == '38') {
        // up arrow
    }
    else if (e.keyCode == '40') {
        // down arrow
    }
    else if (e.keyCode == '37') {
       // left arrow
    }
    else if (e.keyCode == '39') {
       // right arrow
    }

}

event.key === "Panah" ...

Lebih baru dan lebih bersih: gunakan event.key. Tidak ada lagi kode angka yang berubah-ubah! Jika Anda mentransisikan atau tahu bahwa semua pengguna Anda menggunakan browser modern, gunakan ini!

node.addEventListener('keydown', function(event) {
    const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown"
});

Penanganan Verbose:

switch (event.key) {
    case "ArrowLeft":
        // Left pressed
        break;
    case "ArrowRight":
        // Right pressed
        break;
    case "ArrowUp":
        // Up pressed
        break;
    case "ArrowDown":
        // Down pressed
        break;
}

Anda dapat dengan mudah memperpanjang ini untuk memeriksa "w", "a", "s", "d", atau kunci lainnya

Mozilla Docs

Browser yang Didukung

PS event.codesama untuk panah

Mungkin formulasi tersest:

document.onkeydown = function(e) {
    switch (e.keyCode) {
        case 37:
            alert('left');
            break;
        case 38:
            alert('up');
            break;
        case 39:
            alert('right');
            break;
        case 40:
            alert('down');
            break;
    }
};

Demo (terima kasih kepada pengguna Angus Grant): http://jsfiddle.net/angusgrant/E3tE6/

Ini harus bekerja lintas browser. Tinggalkan komentar jika ada browser yang tidak berfungsi.

Ada cara lain untuk mendapatkan kode kunci (e.which, e.charCode, dan window.event alih-alih e), tetapi seharusnya tidak diperlukan. Anda dapat mencoba sebagian besar dari mereka di http://www.asquare.net/javascript/tests/KeyCode.html . Perhatikan bahwa event.keycode tidak berfungsi dengan onkeypress di Firefox, tetapi itu bekerja dengan onkeydown.

Gunakan keydown, bukan keypressuntuk kunci yang tidak dapat dicetak seperti tombol panah:

function checkKey(e) {
    e = e || window.event;
    alert(e.keyCode);
}

document.onkeydown = checkKey;

Referensi acara kunci JavaScript terbaik yang saya temukan (mengalahkan celana dari quirksmode, misalnya) ada di sini: http://unixpapa.com/js/key.html

Jawaban modern karena keyCode sekarang tidak digunakan lagi karena kunci :

document.onkeydown = function (e) {
    switch (e.key) {
        case 'ArrowUp':
            // up arrow
            break;
        case 'ArrowDown':
            // down arrow
            break;
        case 'ArrowLeft':
            // left arrow
            break;
        case 'ArrowRight':
            // right arrow
    }
};

Saya percaya metode terbaru adalah:

document.addEventListener("keydown", function(event) {
  event.preventDefault();
  const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown"
  switch (key) { // change to event.key to key to use the above variable
    case "ArrowLeft":
      // Left pressed
      <do something>
      break;
    case "ArrowRight":
      // Right pressed
      <do something>
      break;
    case "ArrowUp":
      // Up pressed
      <do something>
      break;
    case "ArrowDown":
      // Down pressed
      <do something>
      break;
  }
});

Ini mengasumsikan pengembang ingin kode aktif di mana saja pada halaman dan klien harus mengabaikan penekanan tombol lainnya. Hilangkan event.preventDefault (); baris jika penekanan tombol, termasuk yang ditangkap oleh pawang ini harus tetap aktif.

function checkArrowKeys(e){
    var arrs= ['left', 'up', 'right', 'down'], 
    key= window.event? event.keyCode: e.keyCode;
    if(key && key>36 && key<41) alert(arrs[key-37]);
}
document.onkeydown= checkArrowKeys;

Berikut ini contoh implementasi:

var targetElement = $0 || document.body;

function getArrowKeyDirection (keyCode) {
  return {
    37: 'left',
    39: 'right',
    38: 'up',
    40: 'down'
  }[keyCode];
}

function isArrowKey (keyCode) {
  return !!getArrowKeyDirection(keyCode);
}

targetElement.addEventListener('keydown', function (event) {
  var direction,
      keyCode = event.keyCode;

  if (isArrowKey(keyCode)) {
    direction = getArrowKeyDirection(keyCode);

    console.log(direction);
  }
});

Begini cara saya melakukannya:

var leftKey = 37, upKey = 38, rightKey = 39, downKey = 40;
var keystate;
document.addEventListener("keydown", function (e) {
    keystate[e.keyCode] = true;
});
document.addEventListener("keyup", function (e) {
    delete keystate[e.keyCode];
});

if (keystate[leftKey]) {
//code to be executed when left arrow key is pushed.
}
if (keystate[upKey]) {
//code to be executed when up arrow key is pushed.
}
if (keystate[rightKey]) {
//code to be executed when right arrow key is pushed.
}
if (keystate[downKey]) {
//code to be executed when down arrow key is pushed.
}

Saya bisa menjebak mereka dengan jQuery:

$(document).keypress(function (eventObject) {
    alert(eventObject.keyCode);
});

Contoh: http://jsfiddle.net/AjKjU/

Itu adalah kode kerja untuk chrome dan firefox

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type="text/javascript">

    function leftArrowPressed() {
      alert("leftArrowPressed" );
      window.location = prevUrl  
    }

    function rightArrowPressed() {
      alert("rightArrowPressed" );
      window.location = nextUrl  
    }
    function topArrowPressed() {
      alert("topArrowPressed" );
      window.location = prevUrl  
    }

    function downArrowPressed() {
      alert("downArrowPressed" );
      window.location = nextUrl  
    }

        document.onkeydown = function(evt) {
                        var nextPage = $("#next_page_link")
                        var prevPage = $("#previous_page_link")
                        nextUrl = nextPage.attr("href")
                        prevUrl = prevPage.attr("href")
        evt = evt || window.event;
        switch (evt.keyCode) {
                case 37:
                leftArrowPressed(nextUrl);
                break;

                case 38:
                topArrowPressed(nextUrl);
                break;

                 case 39:
                rightArrowPressed(prevUrl);
                break;

                case 40:
                downArrowPressed(prevUrl);
                break;

        }
    };


</script>
</head>
<body>
<p>
<a id="previous_page_link" href="http://www.latest-tutorial.com">Latest Tutorials</a> 
<a id="next_page_link" href="http://www.zeeshanakhter.com">Zeeshan Akhter</a>
 </p>
</body>
</html>

Saya juga mencari jawaban ini sampai saya menemukan posting ini.

Saya telah menemukan solusi lain untuk mengetahui kode kunci dari berbagai kunci, berdasarkan masalah saya. Saya hanya ingin membagikan solusi saya.

Cukup gunakan peristiwa keyup / keydown untuk menulis nilai di konsol / mengingatkan penggunaan yang sama event.keyCode. Suka-

console.log(event.keyCode) 

// or

alert(event.keyCode)

- rupam

Itu lebih pendek.

function IsArrows (e) { return (e.keyCode >= 37 && e.keyCode <= 40); }

Perpustakaan ini berbatu! https://craig.is/killing/mice

Mousetrap.bind('up up down down left right left right b a enter', function() {
    highlight([21, 22, 23]);
});

Anda perlu menekan urutan sedikit cepat untuk menyorot kode di halaman itu.

Kembali jawaban yang Anda keydowntidak perlu keypress.

Dengan asumsi Anda ingin memindahkan sesuatu secara terus-menerus ketika tombol ditekan, saya menemukan itu keydownberfungsi untuk semua browser kecuali Opera. Untuk Opera, keydownhanya memicu pada pers pertama. Untuk mengakomodasi penggunaan Opera:

document.onkeydown = checkKey;
document.onkeypress = checkKey;
function checkKey(e)
{ etc etc

Tombol panah dipicu pada keyup

$(document).on("keyup", "body", function(e) {
 if (e.keyCode == 38) {
    // up arrow
    console.log("up arrow")
  }
  if (e.keyCode == 40) {
      // down arrow
      console.log("down arrow")
  }
  if (e.keyCode == 37) {
    // left arrow
    console.log("lefy arrow")
  }
  if (e.keyCode == 39) {
    // right arrow
    console.log("right arrow")
  }
})

onkeydown memungkinkan ctrl, alt, shits

onkeyup memungkinkan tab, panah atas, panah bawah, panah kiri, panah bawah

Jika Anda menggunakan jquery maka Anda juga bisa melakukan ini,

 $(document).on("keydown", '.class_name', function (event) {
    if (event.keyCode == 37) {
        console.log('left arrow pressed');
    }
    if (event.keyCode == 38) {
        console.log('up arrow pressed');
    }
    if (event.keyCode == 39) {
        console.log('right arrow pressed');
    }
    if (event.keyCode == 40) {
        console.log('down arrow pressed');
    }
 });

kontrol kode kunci %=37dan &=38... dan hanya tombol panah kiri = 37 ke atas = 38

function IsArrows (e) {
   return ( !evt.shiftKey && (e.keyCode >= 37 && e.keyCode <= 40)); 
}

Jika Anda ingin mendeteksi penekanan tombol panah tetapi tidak perlu spesifik dalam Javascript

function checkKey(e) {
   if (e.keyCode !== 38 || e.keyCode !== 40 || e.keyCode !== 37 || e.keyCode !== 39){
    // do something
   };
}

Dengan kunci dan ES6.

Ini memberi Anda fungsi terpisah untuk setiap tombol panah tanpa menggunakan sakelar dan juga berfungsi dengan 2,4,6,8 tombol di numpad saat NumLockdiaktifkan.

const element = document.querySelector("textarea"),
  ArrowRight = k => {
    console.log(k);
  },
  ArrowLeft = k => {
    console.log(k);
  },
  ArrowUp = k => {
    console.log(k);
  },
  ArrowDown = k => {
    console.log(k);
  },
  handler = {
    ArrowRight,
    ArrowLeft,
    ArrowUp,
    ArrowDown
  };

element.addEventListener("keydown", e => {
  const k = e.key;

  if (handler.hasOwnProperty(k)) {
    handler[k](k);
  }
});

<p>Click the textarea then try the arrows</p>
<textarea></textarea>