Bagaimana cara mengetahui tombol karakter apa yang ditekan?

118

Saya ingin mengetahui tombol karakter apa yang ditekan dengan cara yang kompatibel lintas-browser dalam Javascript murni.

javascript dom-events keypress xXx
sumber
1
Bukankah semua ini jawaban untuk pertanyaan "tombol apa yang ditekan?" Bagaimana jika, saat dijalankan, kode javascript ingin mengetahui apakah tombol pada keyboard saat ini ditahan?
mwardm
2
event.keyakan langsung memberi Anda karakter yang ditekan
Gibolt

Jawaban:

158

"Hapus" JavaScript:

<script type="text/javascript">
  function myKeyPress(e){
    var keynum;

    if(window.event) { // IE                    
      keynum = e.keyCode;
    } else if(e.which){ // Netscape/Firefox/Opera                   
      keynum = e.which;
    }

    alert(String.fromCharCode(keynum));
  }
</script>

<form>
  <input type="text" onkeypress="return myKeyPress(event)" />
</form>

JQuery:

$(document).keypress(function(event){
  alert(String.fromCharCode(event.which)); 
});
Coyod
sumber
6
ini berfungsi baik untuk karakter alfabet, tetapi bagaimana dengan titik / brakets dan simbol tipogtafis lainnya?
VoVaVc
6
@VoVaVc: Ini juga bekerja untuk mereka. Yang terpenting adalah menggunakan keypressacara, yang memberi Anda kode karakter, bukan keyupatau keydownyang memberi Anda kode kunci.
Tim Down
2
@aljgom, e.keymasih belum memiliki dukungan browser lengkap.
Andy Mercer
1
Tidak berfungsi untuk simbol yang harus Anda tekan shift untuk membuatnya, seperti!
Curtis
5
Kunci @AndyMercer sekarang didukung oleh semua browser utama: developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/…
Ray
34

Ada jutaan duplikat dari pertanyaan ini di sini, tapi ini dia lagi:

document.onkeypress = function(evt) {
    evt = evt || window.event;
    var charCode = evt.keyCode || evt.which;
    var charStr = String.fromCharCode(charCode);
    alert(charStr);
};

Referensi terbaik tentang peristiwa penting yang pernah saya lihat adalah http://unixpapa.com/js/key.html .

Tim Down
sumber
23

Lebih baru dan lebih bersih: gunakan event.key. Tidak ada lagi kode angka yang berubah-ubah!

CATATAN: Properti lama ( .keyCodedan .which) tidak digunakan lagi.

node.addEventListener('keydown', function(event) {
    const key = event.key; // "a", "1", "Shift", etc.
});

Jika Anda ingin memastikan hanya satu karakter yang dimasukkan, centang key.length === 1, atau itu adalah salah satu karakter yang Anda harapkan.

Mozilla Docs

Browser yang Didukung

Gibolt
sumber
Apakah ini untuk node.js?
merrybot
Tidak, node hanya berarti elemen DOM apa pun. Jika Anda memiliki Node.js yang terhubung ke UI, saya kira itu akan berhasil
Gibolt
keydown untuk beberapa perangkat seluler tidak berfungsi itu mengembalikan undefine
Angelotti
4

Mencoba:

<table>
<tr><td>Key:</td><td id="key"></td></tr>
<tr><td>Key Code:</td><td id="keyCode"></td></tr>
<tr><td>Event Code:</td><td id="eventCode"></td></tr>
</table>
<script type="text/javascript">
window.addEventListener("keydown", function (e) {
  //tested in IE/Chrome/Firefox
  document.getElementById("key").innerHTML = e.key;
  document.getElementById("keyCode").innerHTML = e.keyCode;
  document.getElementById("eventCode").innerHTML = e.code;
})
</script>
Luaskan cuplikan

* Catatan: ini berfungsi di "Jalankan cuplikan kode"

Situs web ini melakukan hal yang sama seperti kode saya di atas: Keycode.info

lewdev
sumber
1

Gunakan yang ini:

function onKeyPress(evt){
  evt = (evt) ? evt : (window.event) ? event : null;
  if (evt)
  {
    var charCode = (evt.charCode) ? evt.charCode :((evt.keyCode) ? evt.keyCode :((evt.which) ? evt.which : 0));
    if (charCode == 13) 
        alert('User pressed Enter');
  }
}
JCasso
sumber
1 
**check this out** 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(document).keypress(function(e)
        {

            var keynum;
            if(window.event)
            { // IE                 
                keynum = e.keyCode;
            }
                else if(e.which)
                    { 
                    // Netscape/Firefox/Opera                   
                    keynum = e.which;
                    }
                    alert(String.fromCharCode(keynum));
                    var unicode=e.keyCode? e.keyCode : e.charCode;
                    alert(unicode);
        });
});  

</script>
</head>
<body>

<input type="text"></input>
</body>
</html>
kki3908050
sumber
1
Bukankah ini duplikat yang hampir persis dari jawaban @ Coyod tahun 2009?
Chris F Carroll
1

Salah satu perpustakaan favorit saya untuk melakukan ini dengan cara yang canggih adalah perangkap tikus .

Itu dilengkapi dengan berbagai plugin, salah satunya adalah record plugin yang dapat mengidentifikasi urutan tombol yang ditekan.

Contoh:

<script>
    function recordSequence() {
        Mousetrap.record(function(sequence) {
            // sequence is an array like ['ctrl+k', 'c']
            alert('You pressed: ' + sequence.join(' '));
        });
    }
</script>


<button onclick="recordSequence()">Record</button>
momen dipol
sumber
@DanLowe Saya baru saja menambahkan potongan.
dipole_moment
TypeError Tidak Tertangkap: Mousetrap.record bukan fungsi pada recordSequence (****. Html: 12) di HTMLButtonElement.onclick (****. Html: 20)
Irrmich
-2 
document.onkeypress = function(event){
    alert(event.key)
}
gomozor.dll
sumber