domingo, 4 de agosto de 2019

JavaScript eventos de teclado

Vamos a trabajar con los eventos de teclado:
  • 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