Come scoprire quale tasto del carattere viene premuto?


118

Vorrei scoprire quale tasto carattere viene premuto in modo compatibile con cross-browser in puro Javascript.


1
Non sono tutte queste risposte alla domanda "quale tasto è stato premuto?" E se, durante l'esecuzione, il codice javascript volesse sapere se un tasto sulla tastiera è attualmente tenuto premuto?
mwardm

2
event.keyti darà direttamente il carattere premuto
Gibolt

Risposte:


158

JavaScript "Cancella":

<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)); 
});

6
questo funziona bene per i caratteri alfabetici, ma per quanto riguarda i punti / parentesi e altri simboli tipografici?
VoVaVc

6
@VoVaVc: funziona anche per quelli. La cosa cruciale è usare l' keypressevento, che ti dà un codice carattere, piuttosto che keyupo keydownche ti dà un codice chiave.
Tim Down

2
@aljgom, e.keynon ha ancora il supporto completo del browser.
Andy Mercer

1
Non funziona per i simboli che devi premere MAIUSC per creare, come!
Curtis

5
La chiave @AndyMercer è ora supportata da tutti i principali browser: developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/…
Ray

34

Ci sono un milione di duplicati di questa domanda qui, ma eccolo di nuovo comunque:

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

Il miglior riferimento sugli eventi chiave che ho visto è http://unixpapa.com/js/key.html .


23

Più recente e molto più pulito: usa event.key. Niente più codici numerici arbitrari!

NOTA: le vecchie proprietà ( .keyCodee .which) sono deprecate.

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

Se vuoi assicurarti che siano inseriti solo caratteri singoli, controlla key.length === 1o che sia uno dei caratteri che ti aspetti.

Mozilla Docs

Browser supportati


È per node.js?
Merrybot

No, nodo significa solo qualsiasi elemento DOM. Se avessi Node.js che si connette a un'interfaccia utente, suppongo che funzionerebbe
Gibolt

keydown per alcuni dispositivi mobili non funziona restituisce undefine
Angelotti

4

Provare:

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

* Nota: funziona in "Esegui snippet di codice"

Questo sito web fa lo stesso del mio codice sopra: Keycode.info


1

Usa questo:

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');
  }
}

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>

1
Non è un duplicato quasi esatto della risposta del 2009 di @ Coyod?
Chris F Carroll

1

Una delle mie librerie preferite per farlo in modo sofisticato è Mousetrap .

Viene fornito con una varietà di plugin, uno dei quali è il recordplugin che può identificare una sequenza di tasti premuti.

Esempio:

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

@ DanLowe ho appena aggiunto uno snippet.
dipole_moment

Uncaught TypeError: Mousetrap.record non è una funzione in recordSequence (****. Html: 12) in HTMLButtonElement.onclick (****. Html: 20)
Irrmich

-2
document.onkeypress = function(event){
    alert(event.key)
}
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.