Properti keyCode KeyboardEvent

DOM Event KeyboardEvent

Definisi dan Penggunaan

Properti keyCode mengembalikan yang di trigger Peristiwa onkeypress Kode Karakter Unicode untuk tombol yang ditekan, atau men trigger onkeydown atau Peristiwa onkeyup Kode Tombol Unicode untuk tombol

Perbedaan antara dua tipe kode:

  • Kode Karakter - Angka yang mewakili karakter ASCII
  • Kode tombol - mewakili angka digital yang sebenarnya dari tombol papan ketik

Tipe ini tidak selalu berarti hal yang sama. Contohnya, tombol kecil "w" dan besar "W" memiliki kode papan tombol yang sama, karena tombol yang ditekan di keyboard sama ("W" = angka "87"), tetapi kode karakter berbeda, karena karakter yang dihasilkan berbeda ("w" atau "W", yaitu "119" atau "87"). - Lihat contoh yang lebih banyak di bawah ini untuk memahami ini lebih baik.

Petunjuk:Untuk mengetahui apakah tombol yang dapat dicetak ditekan (seperti "a" atau "5"), disarankan untuk menggunakan properti ini di peristiwa onkeypress. Untuk mengetahui apakah tombol fungsi ditekan (seperti "F1", "CAPS LOCK" atau "Home"), gunakan peristiwa onkeydown atau onkeyup.

Keterangan:Dalam Firefox, properti keyCode untuk peristiwa onkeypress tidak bekerja (hanya mengembalikan 0). Untuk solusi yang dapat berlaku di seluruh browser, silakan gunakan Properti whichDipakai bersamaan dengan keyCode, seperti contoh:

var x = event.which || event.keyCode;  // gunakan which atau keyCode tergantung dukungan browser

Petunjuk:Untuk daftar semua karakter Unicode, lihat Referensi Unicode lengkap.

Petunjuk:Jika ingin mengkonversi nilai Unicode ke karakter, gunakan Metode fromCharCode().

Keterangan:Properti ini hanya read-only.

Keterangan:keyCode dan properti which disediakan hanya untuk kompatibilitas. Edisi terbaru standar DOM event menyarankan untuk menggunakan properti key (jika tersedia).

Petunjuk:Jika Anda ingin mengetahui apakah tombol "ALT", "CTRL", "META", atau "SHIFT" ditekan saat terjadi peristiwa penekanan tombol, gunakan altKey,ctrlKey/,metaKey atau shiftKey Atribut.

Contoh

Contoh 1

Ambil nilai Unicode dari tombol papan ketik yang ditekan:

var x = event.keyCode;

Coba Sendiri

Contoh 2

Menggunakan onkeypress dan onkeydown untuk menunjukkan perbedaan antara kode karakter dan kode papan tombol:

<input type="text" onkeypress="uniCharCode(event)" onkeydown="uniKeyCode(event)"> 
function uniCharCode(event) {
  var char = event.which || event.keyCode;
  document.getElementById("demo").innerHTML = "Kode KARAKTER Unicode: " + char;
}
function uniKeyCode(event) {
  var key = event.keyCode;
  document.getElementById("demo2").innerHTML = "Kode KEY Unicode: " + key;
}

Ketika menekan tombol "a" di papan tombol (tanpa Capslock), hasil char dan key akan adalah:

Kode KARAKTER Unicode: 97
Kode KEY Unicode: 65

Coba Sendiri

Contoh 3

Jika pengguna menekan tombol Escape, tampilkan beberapa teks:

<input type="text" onkeydown="myFunction(event)"> 
function myFunction(event) {
  var x = event.keyCode;
  if (x == 27) {  // 27 adalah tombol ESC
    alert("Anda menekan tombol Escape!");
  }
}

Coba Sendiri

Contoh 4

Mengubah nilai Unicode menjadi karakter (tidak berlaku untuk tombol fungsi):

var x = event.keyCode;                // Mendapatkan nilai Unicode
var y = String.fromCharCode(x);       // Mengubah nilai menjadi karakter

Coba Sendiri

Sintaks

event.keyCode

Detil Teknologi

Nilai kembalian: Nilai numerik, menunjukkan kode karakter Unicode atau kode tombol Unicode.
Versi DOM: DOM Level 2 Events

Dukungan Peramban

Atribut Chrome IE Firefox Safari Opera
keyCode Dukungan Dukungan Dukungan Dukungan Dukungan

Halaman yang Berhubungan

Referensi HTML DOM:Properti key KeyboardEvent

Referensi HTML DOM:Properti charCode KeyboardEvent

Referensi HTML DOM:Properti which KeyboardEvent

DOM Event KeyboardEvent