Eventos de teclado de JavaScript

Mayte Mesa

Las interacciones entre HTML y JavaScript se definen por eventos. Desde la carga de una página hasta presionar cualquier tecla o cambiar el tamaño de una ventana, etc., todos se consideran eventos. Los eventos de JavaScript se incluyen en HTML DOM versión 2 y versión 3. Hay una vasta categoría de eventos de JavaScript que pueden ocurrir manipulando una página web a través de un usuario o el navegador, sin embargo, en este artículo, hablaremos específicamente sobre eventos que ocurren usando un teclado.

Los eventos que ocurren cuando se presiona una tecla de teclado se denominan eventos de teclado JavaScript y estos son parte del objeto de TeyboardEvent. Los eventos que entran en la categoría de eventos de teclado son:

Evento OnKeydown
Evento OnKeyPress
Evento OnKeyup

Aquí arrojaremos luz sobre estos eventos mencionados anteriormente en detalle.

Evento OnKeydown

Cuando se presiona una tecla de teclado, ocurre el evento OnKeydown. Burbujea y también es cancelable. Este evento admite todas las etiquetas HTML que no sean , ,
, , , , , , , , y y están incluidos en DOM versión 2.</p> <p><strong>Sintaxis</strong><br>La sintaxis del evento OneKeydown es la siguiente</p> <p><strong>Sintaxis html</strong><br> </p> <p><strong>Sintaxis de JavaScript</strong><br>objeto.onKeydown = function () script;</p> <p><strong>JavaScript addEventListener () sintaxis</strong><br>objeto.addEventListener ("Keydown", script); </p> <p>Ejemplo</p> <!DOCTYPE html><br><html><br><body><br><br><script><br>function functionName() <br>alert("You just pressed a key while inside the input field!");<br><br></script><br></body><br></html> <p>En el ejemplo anterior, se ha creado un campo de entrada. Mientras está dentro del campo de entrada, cuando el usuario presiona una tecla de teclado, el evento OnKeydown se activará y el color de fondo del campo de entrada cambiará a Pink.</p> <p>Producción</p> <p>Antes de presionar una tecla de teclado.</p> <p>Después de presionar una tecla de teclado dentro del campo de entrada.</p> <p>Evento OnKeyPress</p> <p>Cuando se presiona una tecla de teclado, ocurre el evento OnKeyPress. Burbujea y también es cancelable. Este evento admite todas las etiquetas HTML que no sean , , <br>, , , <iframe>, , , , , y y están incluidos en DOM versión 2.</p> <p><strong>Sintaxis</strong><br>La sintaxis del evento OneKeyPress es la siguiente</p> <p><strong>Sintaxis html</strong><br> </p> <p><strong>Sintaxis de JavaScript</strong><br>objeto.onKeyPress = function () script;</p> <p><strong>JavaScript addEventListener () sintaxis</strong><br>objeto.addEventListener ("KeyPress", script); </p> <p>Ejemplo</p> <!DOCTYPE html><br><html><br><body><br><br><script><br>function functionName() <br>document.getElementById("tutorial").style.backgroundColor = "pink";<br><br></script><br></body><br></html> <p>En el ejemplo anterior, se está creando un campo de entrada. Cuando un usuario presiona una tecla de teclado mientras está dentro del campo de entrada, el evento OnKeyPress ocurrirá y el color de fondo del campo de entrada cambiará a rosa.</p> <p><strong>Producción</strong><br>Antes de presionar una tecla.</p> <p>Después de presionar una tecla de teclado, el color de fondo del campo de entrada cambia a rosa.</p> <p>Evento OnKeyup</p> <p>Cuando se lanza una tecla de teclado, el evento OnKeyUp ocurre. Burbujea y también es cancelable. Este evento admite todas las etiquetas HTML que no sean , , <br>, , , <iframe>, , , , , y y están incluidos en DOM versión 2.</p> <p><strong>Sintaxis</strong><br>La sintaxis del evento OneKeyups es la siguiente</p> <p><strong>Sintaxis html</strong><br> </p> <p><strong>Sintaxis de JavaScript</strong><br>objeto.onKeyUp = function () script;</p> <p><strong>JavaScript addEventListener () sintaxis</strong><br>objeto.addEventListener ("KeyUp", script); </p> <p>Ejemplo</p> <!DOCTYPE html><br><html><br><body><br><br><script><br>function keydownFunction() <br>document.getElementById("tutorial").style.backgroundColor = "pink";<br><br>function keyupFunction() <br>document.getElementById("tutorial").style.backgroundColor = "yellow";<br><br></script><br></body><br></html> <p>En el ejemplo anterior, se demuestran los eventos de OnKeydown y OnKeyup. Se está creando un campo de entrada. Cuando presiona una tecla, el evento OnKeydown se activa y el color de fondo del campo de entrada se convertirá en rosa y cuando suelte una tecla, el evento OnKeyUp se activará y el color de fondo se volverá amarillo.</p> <p><strong>Producción</strong><br>Cuando el usuario presiona una tecla en el campo de entrada.</p> <p>Después de lanzar la llave.</p> <p>Conclusión</p> <p>Los eventos que ocurren debido a presionar un botón de teclado se denominan eventos del mouse JavaScript. Los eventos que se clasifican en la categoría de eventos de teclado JavaScript son Event OnKeydown, Evento OnKeyPress, Evento OnKeyup. Todos estos eventos tienen diferentes propósitos, y se discuten en detalle junto con ejemplos apropiados, en este artículo.</p> </div> <div class="rek-block rek-block-article"> </div> <ul class="prev-next"> <li class="prev-next__item prev-next__item--left"><a href="http://es.cyberaxe.org/article/java-math-class-methods--explained-with-examples">« Métodos de clase de matemáticas Java | Explicado con ejemplos</a></li> <li class="prev-next__item prev-next__item--right"><a href="http://es.cyberaxe.org/article/javascript-object-accessors">Accesores de objetos JavaScript »</a></li> </ul> <style> .prev-next { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 20px 0; list-style: none; gap: 30px; } .prev-next li { max-width: 50%; } .prev-next__item { display: inline-block; font-weight: bold; } .prev-next__item--left { text-align: left; } .prev-next__item--right { text-align: right; } @media(max-width: 768px) { .prev-next li { max-width: 85%; } .prev-next__item--left { align-self: flex-start; } .prev-next__item--right { align-self: flex-end; } .prev-next { display: flex; flex-direction: column; } } </style> </div> <div class="col-xl-4"> <div class="sidebar-news"> <div class="rek-block rek-block-sidebar"> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://es.cyberaxe.org/category/c-sharp">c agudo</a> </div> <div class="white-news__name"> <a href="http://es.cyberaxe.org/article/what-does-the-plus-equals--operator-means-in-c">¿Qué significa??</a> </div> <div class="white-news__text"> La asignación de adición o el operador de igualdad de igual (+=) en C# se usa para incrementar el va... </div> <div class="white-news__author"> <a href="http://es.cyberaxe.org/author/lorenzo-canales">Lorenzo Canales</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://es.cyberaxe.org/category/powershell">Potencia Shell</a> </div> <div class="white-news__name"> <a href="http://es.cyberaxe.org/article/what-are-the-steps-to-run-remote-commands-in-powershell">¿Cuáles son los pasos para ejecutar comandos remotos en PowerShell??</a> </div> <div class="white-news__text"> Los comandos remotos se pueden ejecutar habilitando el control remoto de PowerShell. Para habilitar ... </div> <div class="white-news__author"> <a href="http://es.cyberaxe.org/author/andres-barrientos">Andrés Barrientos</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://es.cyberaxe.org/category/debian">Debian</a> </div> <div class="white-news__name"> <a href="http://es.cyberaxe.org/article/how-to-configure-the-apache-web-server-on-debian">Cómo configurar el servidor web Apache en Debian</a> </div> <div class="white-news__text"> Para configurar el servidor web Apache en Debian, instalar y configurar el servidor Apache, luego co... </div> <div class="white-news__author"> <a href="http://es.cyberaxe.org/author/pilar-melgar">Pilar Melgar</a> </div> </div> </div> </div> </div> </div> <div class="container"> <div class="my-slider"> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/python">Pitón</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/seaborn-axis-labels">Etiquetas del eje marino</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/andres-barrientos">Andrés Barrientos</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/php">php</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/how-to-use-regular-expressions-in-php">Cómo usar expresiones regulares en PHP</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/beatriz-enriquez">Beatriz Enríquez</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/java">Java</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/what-is-the-default-keyword-in-switch-statements">¿Cuál es la palabra clave predeterminada en las declaraciones de conmutador??</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/daniela-villasenor">Daniela Villaseñor</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/fedora">Fedora</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/how-to-enable-the-rpm-fusion-repository-on-fedora">Cómo habilitar el repositorio de fusión RPM en Fedora</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/lorenzo-canales">Lorenzo Canales</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/c-programming">Programación C</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/how-to-print--using-printf-in-c-programming">Cómo imprimir % usando printf en la programación C?</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/andres-barrientos">Andrés Barrientos</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/c">C ++</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/how-to-declare-variables-in-c">Cómo declarar variables en c++?</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/mariana-cotto">Mariana Cotto</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/c">C ++</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/understanding-while-loop-in-c">Comprensión mientras bucle en c ++</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/jose-luis-villagomez">José Luis Villagómez</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/c-sharp">c agudo</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/what-is-the-difference-between-class-and-object-in-c">¿Cuál es la diferencia entre clase y objeto en C#?</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/beatriz-enriquez">Beatriz Enríquez</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/golang">golang</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/what-is-a-class-and-an-object-in-golang">¿Qué es una clase y un objeto en Golang??</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/jose-luis-villagomez">José Luis Villagómez</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/php">php</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/what-is-an-interface-in-object-oriented-php">¿Qué es una interfaz en PHP orientado a objetos?</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/mariana-cotto">Mariana Cotto</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="footer"> <div class="footer__about">Un sitio sobre el sistema operativo Linux. Aquí encontrará muchos artículos interesantes y guías útiles</div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://es.cyberaxe.org/category/python">Pitón</a></li> <li class="menu-item"><a href="http://es.cyberaxe.org/category/postgresql">Postgresql</a></li> <li class="menu-item"><a href="http://es.cyberaxe.org/category/oracle-linux">Oracle Linux</a></li> <li class="menu-item"><a href="http://es.cyberaxe.org/category/c">C ++</a></li> <li class="menu-item"><a href="http://es.cyberaxe.org/category/windows-os">OS de Windows</a></li> </li> </ul> </div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://es.cyberaxe.org/category/docker">Estibador</a></li> <li class="menu-item"><a href="http://es.cyberaxe.org/category/c-sharp">c agudo</a></li> <li class="menu-item"><a href="http://es.cyberaxe.org/category/r">Riñonal</a></li> <li class="menu-item"><a href="http://es.cyberaxe.org/category/oracle-database">Base de datos Oracle</a></li> </li> <li class="menu-item"><a href="http://es.cyberaxe.org/all-categories"><b>Todas las categorias</b></a></li> </ul> </div> </div> </div> </footer> <script src="/assets/artline/js/app.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script> const images = document.querySelectorAll('img'); for (let i = 0; i < images.length; i++) { images[i].onerror = function() { this.src = 'https://cyberaxe.org/storage/img/nophoto.jpg'; } } </script> </body> </html>