Mendeteksi penekanan tombol panah dalam JavaScript

460

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).

mihsathe
sumber

Jawaban:

735

Tombol panah hanya dipicu oleh onkeydown, bukan onkeypress.

Kode kunci adalah:

  • kiri = 37
  • naik = 38
  • benar = 39
  • turun = 40
Mark Kahn
sumber
15
Beberapa browser memang memicu keypressperistiwa untuk tombol panah, tetapi Anda benar bahwa keydownselalu berfungsi untuk tombol panah.
Tim Down
4
Jika Anda menekan%, Anda juga mendapatkan keyCode 37
xorcus
9
@xorcus - Tidak, Anda mendapatkan 53dengan keydownacara. Anda mendapatkan 37dengan keypress, yang merupakan hal yang berbeda
Mark Kahn
7
Bagaimana dengan onkeyup?
1nfiniti
2
@MrCroft - atau dengarkan onkeyupdan hentikan acara di sana. Namun secara realistis Anda seharusnya tidak memodifikasi perilaku UI dengan Javascript.
Mark Kahn
225

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
    }

}
ketan
sumber
Apa yang dilakukan baris kedua?
eshellborn
16
Untuk memperjelas, 'e || window.event 'berarti bahwa jika' e 'adalah nilai yang ditentukan, itu akan menjadi hasil dari' || ' ekspresi. Jika 'e' tidak didefinisikan, 'window.event' akan menjadi hasil dari '||' ekspresi. Jadi pada dasarnya singkatan untuk: e = e ? e : window.event; Atau:if (typeof(e) === "undefined") { e = window.event; }
Michael Calvin
17
Ini untuk membuatnya berfungsi pada versi lama IE (pra IE9) di mana acara tidak diteruskan ke fungsi handler.
Mark Rhodes
12
Hanya untuk mencatat keyCode adalah angka dan === idealnya harus digunakan
alexrogers
11
@ketan intinya adalah bahwa keyCode adalah angka dan harus diperiksa seperti keyCode === 32, bukan keyCode == '32'atau keyCode === '32'.
Nenotlep
98

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

Gibolt
sumber
5
Terima kasih telah menggunakan keydan tidak keyCode, itu sudah usang.
v010dya
8
Catatan dari MDN: Internet Explorer, Edge (16 dan sebelumnya), dan Firefox (36 dan sebelumnya) menggunakan "Kiri", "Kanan", "Atas", dan "Bawah" sebagai ganti "ArrowLeft", "ArrowRight", "ArrowUp ", dan" ArrowDown ".
Simon
95

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.

1 ''
sumber
3
Saya harus mencari definisi singkat , kemudian saya (dengan sigap) mempostulatkan bahwa tersest adalah konjugasi yang tidak tepat; sayangnya, saya mengakui: perhatian saya adalah terbantahkan .
ashleedawg
20

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

Tim Down
sumber
16

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
    }
};
Joshua Fan
sumber
12

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.

lrhorer
sumber
9
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;
kennebec
sumber
1
Bukankah itu layak untuk diletakkan di arrsluar fungsi? Tidak perlu membuat ulang setiap panggilan
Duka
8

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);
  }
});
RobPW
sumber
Saya mendapatkan $ 0 tidak didefinisikan var targetElement = typeof $0 !== 'undefined' ? $0 : document.body; atau hanya: var targetElement = document.body;is ok
papo
7

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.
}
OneStig
sumber
5

Saya bisa menjebak mereka dengan jQuery:

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

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

Albireo
sumber
4
keypresstidak akan bekerja dengan tombol panah. Anda harus menggunakan $(document).on('keydown', function() {...})sebagai gantinya
Juribiyan
4

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>
Zeeshan Akhter
sumber
3

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

Rupam Datta
sumber
3

Itu lebih pendek.

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

Andrey Vaganov
sumber
2
singkatnya bagus:if ([37,38,39,40].indexOf(e.keyCode)!=-1){ console.log('arrow pressed') }
animaacija
3

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.

Fandi Susanto
sumber
2

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
Alan Finners
sumber
2

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

batMan007
sumber
1

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');
    }
 });
Kalyan Halder Raaz
sumber
0

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)); 
}
Juver Paredes
sumber
0

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
   };
}
KitKit
sumber
0

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>

volt
sumber