Les événements du clavier
Les événements du clavier appartiennent à l'objet keyboardEvent qui hérite de l'objet Event.
MDN ou W3School
Les événements du clavier:
Une touche enfoncée
On va utiliser les propriétés keydown, keyup ou keypress sur l'objet keyboardEvent.
Démo
<h1 id=maintitre>Pressons une touche du clavier...</h1>
<script>
var d1=document.getElementsByTagName("body")[0];
d1.addEventListener("keydown",reaction);
//Utiliser aussi keypress et keyup
function reaction(e){
alert("Oups, une touche est enfoncée!");
}
</script>
Démo
<body>
<h1 id=maintitre>Un bel input</h1>
<input type=text id="plouc">
<div id=res></div>
<script>
var myinput=document.querySelector("#plouc");
var res=document.querySelector("#res");
myinput.addEventListener("keypress",function(e){
res.innerHTML="Touche pressée!";
});
</script>
</body>
Les propriétés du clavier
Les propriétés du clavier appartiennent à l'objet keyboardEvent qui hérite de l'objet Event.
MDN ou W3School
Les propriétés du clavier:
- altKey
- ctrKey
- shiftKey
- Key
Détecter si ctrl, shift ou alt est enfoncée
On va utiliser les propriétés altKey, ctrKey ou shiftKey sur l'objet keyboardEvent.
Démo
<head>
<meta charset="utf-8">
</head>
<body>
<h1 id=maintitre>On détecte...</h1>
<div id=res></div>
<script>
var touche=document.getElementsByTagName("body")[0];
var res=document.querySelector("#res");
touche.addEventListener("keydown",function(e){
res.innerHTML="alt pressée:"+e.altKey
+"<br>ctrl pressée:"
+e.ctrlKey+"<br>shift pressée:"
+e.shiftKey;
});
</script>
</body>
Détecter la touche enfoncée
On va utiliser les propriétés Key sur l'objet keyboardEvent.
Démo
<head>
<meta charset="utf-8">
</head>
<body>
<h1 id=maintitre>On détecte...</h1>
<div id=res></div>
<script>
var touche=document.getElementsByTagName("body")[0];
var res=document.querySelector("#res");
touche.addEventListener("keydown",function(e){
res.innerHTML="Touche pressée:"+e.Key;
});
</script>
</body>
