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/docker">Estibador</a> </div> <div class="white-news__name"> <a href="http://es.cyberaxe.org/article/how-can-i-list-all-docker-commands">¿Cómo puedo enumerar todos los comandos de Docker??</a> </div> <div class="white-news__text"> Para enumerar todos los comandos de Docker, utilice los comandos Docker, Ayuda Docker o Docker --hel... </div> <div class="white-news__author"> <a href="http://es.cyberaxe.org/author/salvador-anaya">Salvador Anaya</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://es.cyberaxe.org/category/c">C ++</a> </div> <div class="white-news__name"> <a href="http://es.cyberaxe.org/article/difference-between--and--operators-in-c">Diferencia entre los operadores+= y =+en C ++</a> </div> <div class="white-news__text"> En C ++,+= agrega un valor a una variable y asigna el resultado, mientras que =+asigna valor antes d... </div> <div class="white-news__author"> <a href="http://es.cyberaxe.org/author/pilar-aleman">Pilar Alemán</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://es.cyberaxe.org/category/salesforce">Fuerza de ventas</a> </div> <div class="white-news__name"> <a href="http://es.cyberaxe.org/article/batch-apex-in-salesforce">Apex por lotes en Salesforce</a> </div> <div class="white-news__text"> Tutorial sobre cómo hacer las operaciones de DML masiva como insertar, actualizar y eliminar con lot... </div> <div class="white-news__author"> <a href="http://es.cyberaxe.org/author/hernan-delao">Hernán Delao</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/pandas-explode-multiple-columns">Pandas explota múltiples columnas</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/python">Pitón</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/python-list-to-comma-separated-string">Lista de Python a una cadena separada por comas</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/carolina-guzman">Carolina Guzmán</a> </div> </div> </div> </div> <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/python-math-exp">Python Math Exp</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/python">Pitón</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/how-do-i-check-if-a-string-is-empty-in-python">¿Cómo verifico si una cadena está vacía en Python?</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/lorenzo-morales">Lorenzo Morales</a> </div> </div> </div> </div> <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/python-chmod">Python Chmod</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/pilar-melgar">Pilar Melgar</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/docker">Estibador</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/what-is-docker-bind-mounts">¿Qué son los monturas de enlace de Docker??</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/salesforce">Fuerza de ventas</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/salesforce-apex---list">Salesforce Apex - Lista</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/salvador-anaya">Salvador Anaya</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/how-to-use-byte-keyword-in-java">Cómo usar la palabra clave de byte en java</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/carolina-guzman">Carolina Guzmán</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/oracle-database">Base de datos Oracle</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/how-oracle-database-is-different-from-oracle-sql-developer">Cómo Oracle Database es diferente del desarrollador de Oracle SQL?</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/pilar-melgar">Pilar Melgar</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/docker">Estibador</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/what-are-the-steps-to-run-nginx-in-a-docker-container-on-ubuntu-top-10-top-10">¿Cuáles son los pasos para ejecutar Nginx en un contenedor Docker en Ubuntu Top 10.Top 10?</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> <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>