Comment savoir quelle touche de caractère est enfoncée?

118

Je voudrais savoir quelle touche de caractère est pressée d'une manière compatible avec tous les navigateurs en Javascript pur.

javascript dom-events keypress xXx
la source
1
Toutes ces réponses à la question "quelle touche a été enfoncée?" Que faire si, lors de son exécution, le code javascript veut savoir si une touche du clavier est actuellement maintenue enfoncée?
mwardm
2
event.keyvous donnera directement le caractère pressé
Gibolt

Réponses:

158

JavaScript "Effacer":

<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
la source
6
cela fonctionne bien pour les caractères alphabétiques, mais qu'en est-il des points / braises et autres symboles typogtaphiques?
VoVaVc
6
@VoVaVc: Cela fonctionne aussi pour ceux-là. L'essentiel est d'utiliser l' keypressévénement, qui vous donne un code de caractère, plutôt que keyupou keydownqui vous donne un code clé.
Tim Down
2
@aljgom, e.keyne prend toujours pas en charge le navigateur complet.
Andy Mercer
1
Ne fonctionne pas pour les symboles que vous devez appuyer sur Maj pour créer, comme!
Curtis
5
La clé @AndyMercer est désormais prise en charge par tous les principaux navigateurs: developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/...
Ray
34

Il y a un million de doublons de cette question ici, mais ici encore une fois:

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

La meilleure référence sur les événements clés que j'ai vus est http://unixpapa.com/js/key.html .

Tim Down
la source
23

Plus récent et beaucoup plus propre: utilisation event.key. Fini les codes numériques arbitraires!

REMARQUE: les anciennes propriétés ( .keyCodeet .which) sont obsolètes.

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

Si vous voulez vous assurer que seuls des caractères uniques sont saisis, vérifiez key.length === 1ou qu'il s'agit de l'un des caractères attendus.

Documents Mozilla

Navigateurs pris en charge

Gibolt
la source
Est-ce pour node.js?
merrybot
Non, nœud signifie simplement n'importe quel élément DOM. Si vous aviez Node.js se connectant à une interface utilisateur, je suppose que cela fonctionnerait
Gibolt
keydown pour certains appareils mobiles ne fonctionne pas il retourne undefine
Angelotti
4

Essayer:

<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>
Développer l'extrait

* Remarque: cela fonctionne dans "Exécuter l'extrait de code"

Ce site Web fait la même chose que mon code ci-dessus: Keycode.info

Lewdev
la source
1

Utilisez celui-ci:

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
la source
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
la source
1
N'est-ce pas une copie presque exacte de la réponse de @ Coyod en 2009?
Chris F Carroll
1

L'une de mes bibliothèques préférées pour faire cela de manière sophistiquée est Mousetrap .

Il est livré avec une variété de plugins, dont l'un est le record plugin qui peut identifier une séquence de touches enfoncées.

Exemple:

<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>
moment dipolaire
la source
@DanLowe Je viens d'ajouter un extrait.
dipole_moment
Uncaught TypeError: Mousetrap.record n'est pas une fonction à recordSequence (****. Html: 12) à HTMLButtonElement.onclick (****. Html: 20)
Irrmich
-2 
document.onkeypress = function(event){
    alert(event.key)
}
gomozor
la source