- focus
- blur
- keydown
- keyup
- keypress. Este está deprecated. El nuevo evento se llama beforeinput que de momento es experimental
Podemos ver un caso práctico en el siguiente enlace.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Eventos3</title>
</head>
<body>
<h1>Manejando Eventos</h1>
<h3>Eventos de teclado en JavaScript</h3>
<p>Vamos a escribir algo en la caja de texto.</p>
<p>
<input type="text" name="nombre" id="campo_nombre"/>
</p>
<hr>
<p id="palabritas"></p>
<!--scripts-->
<script src="eventos3.js"></script>
</body>
</html>
JavaScript
'use sctrict'
// primero capturamos el evento y lo asignamos a una variable
var input=document.querySelector("#campo_nombre");
// Focus evento que se lanza cuando pongo el foco dentro de la caja
input.addEventListener('focus',function(){
console.log("[focus] Estas dentro del input");
});
// Blur evento que se lanza cuando pongo el foco fuera de la caja
input.addEventListener('blur',function(){
console.log("[blur] Estas fuera del input");
});
// Keydown evento que se lanza cuando pulso una tecla
input.addEventListener('keydown',function(event){ //con una función anónima
console.log("[keydown] Has pulsado la tecla: ",
String.fromCharCode(event.keyCode));
}); //el inconveniente es que la tecla que sale siempre es en mayúsculas
// Keypress deprecated. El nuevo evento se llama beforeinput
input.addEventListener('keypress',function(event){
console.log('[keypress] Tecla presionada: ',event.key);
});
// Keyup evento que se lanza cuando se levanta el dedo de la tecla
input.addEventListener('keyup',e => { //aquí con una función de flecha
console.log('[keyup] Tecla soltada: ',e.key);
});
//escribir en la página los caracteres que se van tecleando en la caja de texto
const log = document.getElementById('palabritas');
input.addEventListener('keyup',e => {log.textContent=e.target.value});
No hay comentarios:
Publicar un comentario