Eventos de formulario JavaScript

Los eventos de JavaScript se definen como la interacción entre JavaScript y HTML. Los eventos ocurren cada vez que el usuario manipula la página web o el navegador. Modelo de objetos de documento (DOM) Versión 3 consiste en eventos de JavaScript y estos son parte de casi todos los elementos HTML y pueden activar el código JavaScript. Hacer clic en un botón, presionando una tecla, maximizar una ventana, etc. se consideran como un evento.

Existen varios tipos de eventos de JavaScript, sin embargo, discutiremos específicamente los eventos de formulario JavaScript en este artículo.

Los eventos que ocurren a través de la interacción de un usuario con un formulario HTML se llaman eventos de formulario JavaScript. Hay varios tipos de eventos que se encuentran en la categoría de eventos de formulario JavaScript que se enumeran a continuación.

en la falta de definición
en el cambio
onContextMenu
enfocado
en la entrada
oninvalidl
ineset
en la vida
en selección
en la subsidio

Cada uno de los eventos mencionados anteriormente se analiza a continuación.

Evento de Onblur

El evento Onblur ocurre cuando se pierde el enfoque de un elemento. Se usa principalmente dentro del código de validación de un formulario. No burbujea y no se puede cancelar. Admite todas las etiquetas HTML que no sean , ,
, , , , , , , , y se incluye en el nivel de DOM 2.</p> <p><strong>Sintaxis</strong></p> <p>La sintaxis del evento Onblur es la siguiente.</p> <p>Sintaxis html</p> <element onblur="functionName()"> <p>Sintaxis de JavaScript</p> objeto.onblur = function () script; <p>JavaScript addEventListener () sintaxis</p> objeto.addEventListener ("blur", script); <p>Ejemplo</p> <!DOCTYPE html><br><html><br><body><br>Introduzca su nombre: <br><script><br>function functionName() <br>document.getElementById("tutorial").style.background = "yellow";<br><br></script><br></body><br></html> <p>En el ejemplo anterior, cuando el usuario deja el campo de entrada, el evento Onblur se activa y el color de fondo del campo de entrada cambia a amarillo.</p> <p><strong>Producción</strong></p> <p>Evento de Onchange</p> <p>Cuando un usuario cambia el valor de un elemento y deja el elemento, el evento Onchange ocurre. Este evento se asemeja al evento OnInput, sin embargo, lo que lo diferencia del evento OnInput es que puede funcionar en el elemento y ocurre cuando un elemento ha perdido su enfoque.</p> <p>Además, puede soportar ,,,, y etiquetas HTML. Burbujea pero no se puede cancelar y es parte de DOM versión 2.</p> <p><strong>Sintaxis</strong></p> <p>La sintaxis del evento Onchange es la siguiente.</p> <p>Sintaxis html</p> <element onchange="functionName()"> <p>Sintaxis de JavaScript</p> objeto.onchange = function () script; <p>JavaScript addEventListener () sintaxis</p> objeto.addEventListener ("Change", script); <p>Ejemplo</p> <!DOCTYPE html><br><html><br><body><br>Nombre: <br><script><br>function functionName() <br>var change = document.getElementById("tutorial");<br>change.value = change.value.toUpperCase();<br><br></script><br></body><br></html> <p>En el ejemplo anterior, cuando un usuario ingresa su nombre en el campo de entrada y luego deja el campo de entrada, el evento OnChange se activa porque un elemento (campo de entrada) perdió su enfoque y, como resultado, las letras minúsculas se desplazan a letras mayúsculas.</p> <p><strong>Producción</strong></p> <p>evento OnContextMenu</p> <p>Cuando se abre el menú contextual de un elemento utilizando el clic derecho, el evento OnContextMenu ocurre. Burbujea y también es cancelable. Este evento admite todas las etiquetas HTML y se incluye en DOM versión 3.</p> <p><strong>Sintaxis</strong></p> <p>La sintaxis del evento OnContextMenu se da a continuación.</p> <p>Sintaxis html</p> <element oncontextmenu="funtionName()"> <p>Sintaxis de JavaScript</p> objeto.onContextMenu = function () script; <p>JavaScript addEventListener () sintaxis</p> objeto.addEventListener ("contextMenu", script); <p>Ejemplo</p> <!DOCTYPE html><br><html><br><body><br><br><script><br>function functionName() <br>alert("You just right-clicked!");<br><br></script><br></body><br></html> <p>En el ejemplo anterior, cuando haga clic derecho en el campo de entrada, el evento OnContextMenu se activará y primero aparecerá un cuadro de dialoag diciendo que acaba de realizar un clic derecho y después de hacer clic en Aceptar en el cuadro de diálogo Se abrirá el menú contextual.</p> <p><strong>Producción</strong></p> <p>Ahora, cuando haga clic con el botón derecho en el campo de entrada, aparecerá el cuadro de diálogo.</p> <p>Después de hacer clic en Aceptar, el menú contextual se abrirá.</p> <p>Evento de Onfocus</p> <p>El evento Onfocus ocurre cuando se enfoca un elemento. Se usa principalmente con, y . No burbujea y no se puede cancelar. Admite todas las etiquetas HTML que no sean , , <br>, , , <iframe>, , , , , y se incluye en el nivel de DOM 2.</p> <p><strong>Sintaxis</strong></p> <p>La sintaxis del evento Onfocus es la siguiente.</p> <p>Sintaxis html</p> <element onfocus="functionName"> <p>Sintaxis de JavaScript</p> objeto.onfocus = function () script; <p>JavaScript addEventListener () sintaxis</p> objeto.addEventListener ("enfoque", script); <p>Ejemplo</p> <!DOCTYPE html><br><html><br><body><br>Introduzca su nombre: <br><p>Una función cambia el color de fondo del campo de entrada cuando está enfocado.</p><br><script><br>function abFunction(focus) <br>focus.style.background = "pink";<br><br></script><br></body><br></html> <p><strong>Producción</strong></p> <p>Cuando hace clic en el campo de entrada, el color de fondo del campo de entrada se cambiará a azul. Hemos mostrado el estado anterior y posterior del campo de entrada a continuación.</p> <p><strong>Antes</strong></p> <p><strong>Después</strong></p> <p>Evento de In -Input</p> <p>Cuando un usuario da una entrada a un elemento, el evento OnInput ocurre. Este evento se asemeja al evento Onchange, sin embargo, lo que lo diferencia del evento Onchange es que ocurre inmediatamente después de que se haya rectado un valor de elemento. Además, puede soportar ,,,, y etiquetas HTML. Burbujea pero no se puede cancelar y es parte de DOM versión 3.</p> <p><strong>Sintaxis</strong></p> <p>La sintaxis del evento OnInput es el siguiente.</p> <p>Sintaxis html</p> <element oninput="functionName"> <p>Sintaxis de JavaScript</p> objeto.onInput = function () script; <p>JavaScript addEventListener () sintaxis</p> objeto.addEventListener ("entrada", script); <p>Ejemplo</p> <!DOCTYPE html><br><html><br><body><br>Nombre: <br><script><br>function functionName() <br>alert("You just changed the input field value!");<br><br></script><br></body><br></html> <p>En el ejemplo anterior, cuando intenta cambiar el valor dentro del campo de entrada, el evento OnInput se dispara y aparece un cuadro de diálogo que le indica que acaba de cambiar el valor del campo de entrada.</p> <p><strong>Producción</strong></p> <p>Tan pronto como cambie el valor del campo de entrada, aparecerá el mensaje de alerta.</p> <p>Evento ininválido</p> <p>Cuando un usuario proporciona una entrada que no está permitida o una entrada no válida, ocurre el evento OnValid. Este evento no burbujea pero se puede cancelar. Admite solo la etiqueta HTML y se incluye en DOM Nivel 3.</p> <p><strong>Sintaxis</strong></p> <p>La sintaxis del evento OnValid es la siguiente.</p> <p>Sintaxis html</p> <element oninvalid="functionName"> <p>Sintaxis de JavaScript</p> objeto.onInvalid = function () script; <p>JavaScript addEventListener () sintaxis</p> objeto.addEventListener ("inválido", script); <p>Ejemplo</p> <!DOCTYPE html><br><html><br><body><br><form><br>Introduzca su nombre:<br><br><br></form><br><script><br>function functionName() <br>alert("Name field required!");<br><br></script><br></body><br></html> <p>En el ejemplo anterior, si presiona el botón Enviar sin proporcionar su nombre en el campo de entrada, el evento OnInValid se activará y aparecerá un mensaje de alerta que le indica que se requiere el campo Nombre.</p> <p><strong>Producción</strong></p> <p>Evento de Onreset</p> <p>Cuando un usuario restablece un formulario, se produce el evento OnReset. Este evento burbujea y puede cancelarse, además, solo admite el HTML y está incluido en DOM versión 2.</p> <p><strong>Sintaxis</strong></p> <p>La sintaxis del evento Onreset es el siguiente.</p> <p>Sintaxis html</p> <element onreset="functionName"> <p>Sintaxis de JavaScript</p> objeto.onreset = function () script; <p>JavaScript addEventListener () sintaxis</p> objeto.addEventListener ("RESET", Script); <p>Ejemplo</p> <!DOCTYPE html><br><html><br><body><br><form onreset="functionName()"><br>Ingrese su nombre: <br><br></form><br><br><script><br>function functionName() <br>alert("Press OK to reset the form.");<br><br></script><br></body><br></html> <p>En el ejemplo anterior, cuando presiona el botón RESET, el evento OnReset se dispara y aparece un mensaje de alerta y tan pronto como presione el botón OK en el cuadro de diálogo, el campo de entrada se borra.</p> <p><strong>Producción</strong></p> <p>Cuando presiona el botón de reinicio, aparece el mensaje de alerta.</p> <p>Después de presionar el botón OK, el formulario se restablecerá.</p> <p>Evento de OnSearch</p> <p>Cuando un usuario comienza una búsqueda en un elemento con type = "Buscar", el evento de OnSearch ocurre. Este evento ni burbujas ni se puede cancelar, además, solo admite la etiqueta HTML y se incluye en DOM Nivel 3.</p> <p><strong>Sintaxis</strong></p> <p>La sintaxis del evento de OnSearch es el siguiente.</p> <p>Sintaxis html</p> <element onsearch="functionName"> <p>Sintaxis de JavaScript</p> objeto.onseacrh = function () script; <p>JavaScript addEventListener () sintaxis</p> objeto.addEventListener ("Seacrh", script); <p>Ejemplo</p> <!DOCTYPE html><br><html><br><body><br><p>Escriba lo que desea buscar y presione Entrar.</p><br><br><br><script><br>function functionName() <br>var search = document.getElementById("mySearch");<br>alert ("Searching for google.com");<br><br></script><br></body><br></html> <p>En el ejemplo anterior, cuando escriba algo en la barra de búsqueda y presione ENTER, el evento de OnSearch se activa y se mostrará un mensaje que le indica que la búsqueda ha comenzado.</p> <p><strong>Producción</strong></p> <p>Después de escribir Google.com en la barra de búsqueda y presionando enter.</p> <p>Evento OnSelect</p> <p>Ocurre cuando se selecciona un pedazo de texto en un elemento. No es cancelable y ni burbujas. Admite, y etiquetas HTML y se incluye en DOM Nivel 2.</p> <p><strong>Sintaxis</strong></p> <p>La sintaxis del evento Onselect es la siguiente.</p> <p>Sintaxis html</p> <element onselect="funtionName()"> <p>Sintaxis de JavaScript</p> objeto.onselect = function () script; <p>JavaScript addEventListener () sintaxis</p> objeto.addEventListener ("Seleccionar", Script); <p>Ejemplo</p> <!DOCTYPE html><br><html><br><body><br>Elegir texto: <br><script><br>function myFunction() <br>alert("Text selected");<br><br></script><br></body><br></html> <p><strong>Producción</strong></p> <p>Antes de seleccionar.</p> <p>Después de seleccionar.</p> <p>Evento de UNSUBMIT</p> <p>Cuando un usuario envía un formulario, ocurre el evento OnSubmit. Este evento burbujea y puede cancelarse, además, solo admite la etiqueta HTML y se incluye en DOM Nivel 2.</p> <p><strong>Sintaxis:</strong></p> <p>La sintaxis del evento OnSubmit es la siguiente.</p> <p>Sintaxis HTML:</p> <element onsubmit="funtionName()"> <p>Sintaxis de JavaScript:</p> objeto.onSubMit = function () script; <p>JavaScript AddEventListener () Sintaxis:</p> objeto.addEventListener ("enviar", script); <p>Ejemplo</p> <!DOCTYPE html><br><html><br><body><br><form action="/action_page.php" onsubmit="functionName()"><br>Ingrese su nombre: <br><br></form><br><script><br>function functionName() <br>alert("Form submitted!");<br><br></script><br></body><br></html> <p>En el ejemplo anterior, cuando presiona el botón Enviar el evento Onsubmit se activa y aparece un cuadro de diálogo que le dice que el formulario fue enviado.</p> <p><strong>Producción</strong></p> <p>Conclusión</p> <p>Los eventos que ocurren cuando un usuario interactúa con un formulario HTML se llaman eventos de formulario JavaScript. Los eventos que entran en la categoría de eventos de formulario JavaScript son el evento Onblur, el evento OnChange, el evento OnContextMenu, el evento Onfocus, el evento Onput, OnInvalid Event, Onreset Event, OnSearch Event, Onselect Event y Onsubmit Event. Todos estos eventos se discuten en detalle junto con el ejemplo apropiado. </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/javascript-focus-and-blur-events">« JavaScript Focus and Blur Events</a></li> <li class="prev-next__item prev-next__item--right"><a href="http://es.cyberaxe.org/article/what-is-java">Que es Java? »</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">C ++</a> </div> <div class="white-news__name"> <a href="http://es.cyberaxe.org/article/what-is-delete-operator-in-c">¿Qué es el operador Delete en c ++?</a> </div> <div class="white-news__text"> El operador Eliminar en C ++ se usa para liberar la memoria que se asignó dinámicamente utilizando e... </div> <div class="white-news__author"> <a href="http://es.cyberaxe.org/author/beatriz-enriquez">Beatriz Enríquez</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://es.cyberaxe.org/category/windows-os">OS de Windows</a> </div> <div class="white-news__name"> <a href="http://es.cyberaxe.org/article/usb-mouse-and-keyboard-stop-working-issue-in-windows-fixed">USB mouse y teclado dejan de funcionar en Windows [arreglado]</a> </div> <div class="white-news__text"> Para solucionar el problema de trabajo del mouse y del teclado USB, verifique la falla del hardware,... </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/powershell">Potencia Shell</a> </div> <div class="white-news__name"> <a href="http://es.cyberaxe.org/article/tee-object-the-most-underused-cmdlet-in-powershell">Tee-Object el cmdlet más infrautilizado en PowerShell</a> </div> <div class="white-news__text"> El objeto Tee-Object de CMDLET en PowerShell envía o almacena la salida de dos maneras. Uno en la va... </div> <div class="white-news__author"> <a href="http://es.cyberaxe.org/author/beatriz-enriquez">Beatriz Enríquez</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-readcsv-multiprocessing">Pandas read_csv multiprocesamiento</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/html">html</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/how-can-flexbox-be-used-to-create-a-navigation-bar">¿Cómo se puede utilizar Flexbox para crear una barra de navegación??</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/hernan-delao">Hernán Delao</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-to-find-oracle-service-name">Cómo encontrar el nombre del servicio Oracle?</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/aws">AWS</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/how-to-use-aws-systems-manager-session-manager">Cómo usar AWS Systems Manager Manager de sesión?</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/c-sharp">c agudo</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/how-to-convert-a-decimal-to-a-double-in-c">Cómo convertir un decimal a un doble 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/c-programming">Programación C</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/what-is-the-difference-between--and--operators-in-c-programming">¿Cuál es la diferencia entre??</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/php">php</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/what-is-oop-abstract-class-in-php">¿Qué es la clase abstracta de OOP en PHP??</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/pilar-aleman">Pilar Alemán</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/what-does--mean-in-c-programming">¿Qué significa '/=' en la programación C?</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/homero-ontiveros">Homero Ontiveros</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/bash-programming">Programación de bash</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/how-to-use-find-command-in-bash-script">Cómo usar el comando Buscar en el script bash</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/java">Java</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/what-is-the-getordefault-method-in-java-hashma">¿Cuál es el método getordefault en java hashma?</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/pilar-aleman">Pilar Alemán</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>