Informatique


Le clavier (KeyboardEvent)

Aller à

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:

  • keypress
  • keydown
  • keyup

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>