Événements de formulaire JavaScript

Zoe Martinez

Les événements JavaScript sont définis comme l'interaction entre JavaScript et HTML. Les événements se produisent chaque fois que la page Web est manipulée par l'utilisateur ou le navigateur. Document Object Model (DOM) La version 3 se compose d'événements JavaScript et ils font partie de presque tous les éléments HTML et peuvent activer le code JavaScript. En cliquant sur un bouton, en appuyant sur une touche, en maximisant une fenêtre, etc. sont tous considérés comme un événement.

Il existe différents types d'événements JavaScript, mais nous discuterons spécifiquement des événements de formulaire JavaScript dans cet article.

Les événements qui se produisent par l'interaction d'un utilisateur avec un formulaire HTML sont appelés événements de formulaire JavaScript. Il existe différents types d'événements qui relèvent de la catégorie des événements de formulaire JavaScript qui sont répertoriés ci-dessous.

le flou
sur le changement
oncontextmenu
onfocus
se lancer
onInvalidl
reposer
recherche
onélectionner
surbmitte

Chacun des événements mentionnés ci-dessus est discuté ci-dessous.

événement onblur

L'événement OnBlur se produit lorsque le foyer d'un élément est perdu. Il est principalement utilisé dans le code de validation d'un formulaire. Il ne bouillonne pas et ne peut pas être annulé. Il prend en charge toutes les balises HTML autres que , ,
, , , , , , , , et et est inclus dans DOM Niveau 2.</p> <p><strong>Syntaxe</strong></p> <p>La syntaxe de l'événement OnBlur est la suivante.</p> <p>Syntaxe HTML</p> <element onblur="functionName()"> <p>Syntaxe JavaScript</p> objet.onBlur = function () script; <p>Syntaxe javascript addeventListener ()</p> objet.addEventListener ("blur", script); <p>Exemple</p> <!DOCTYPE html><br><html><br><body><br>Entrez votre nom: <br><script><br>function functionName() <br>document.getElementById("tutorial").style.background = "yellow";<br><br></script><br></body><br></html> <p>Dans l'exemple ci-dessus, lorsque l'utilisateur quitte le champ de saisie, l'événement OnBlur est déclenché et la couleur d'arrière-plan du champ de saisie se transforme en jaune.</p> <p><strong>Sortir</strong></p> <p>Événement Onchange</p> <p>Lorsqu'un utilisateur modifie la valeur d'un élément et quitte l'élément, l'événement Onchange se produit. Cet événement ressemble à l'événement OnInput, cependant, ce qui le différencie de l'événement OnInput, c'est qu'il peut fonctionner sur l'élément et se produit lorsqu'un élément a perdu son objectif.</p> <p>De plus, il peut prendre en charge ,,,,,,, et des balises HTML. Il bubbles mais ne peut pas être annulé et fait partie de DOM version 2.</p> <p><strong>Syntaxe</strong></p> <p>La syntaxe de l'événement Onchange est la suivante.</p> <p>Syntaxe HTML</p> <element onchange="functionName()"> <p>Syntaxe JavaScript</p> objet.onchange = function () script; <p>Syntaxe javascript addeventListener ()</p> objet.addEventListener ("change", script); <p>Exemple</p> <!DOCTYPE html><br><html><br><body><br>Nom: <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>Dans l'exemple ci-dessus, lorsqu'un utilisateur entre son nom dans le champ de saisie, puis quitte le champ de saisie, l'événement OnChange est déclenché parce qu'un élément (champ de saisie) a perdu sa mise au point et, par conséquent, les lettres minuscules sont déplacées vers des lettres majuscules.</p> <p><strong>Sortir</strong></p> <p>Événement OnContextMenu</p> <p>Lorsque le menu contextuel d'un élément est ouvert à l'aide du clic droit, l'événement onContextMenu se produit. Il bubble et est également annule. Cet événement prend en charge toutes les balises HTML et est incluse dans DOM version 3.</p> <p><strong>Syntaxe</strong></p> <p>La syntaxe de l'événement OnContextMenu est donnée ci-dessous.</p> <p>Syntaxe HTML</p> <element oncontextmenu="funtionName()"> <p>Syntaxe JavaScript</p> objet.onContextMenu = function () script; <p>Syntaxe javascript addeventListener ()</p> objet.addEventListener ("contextMenu", script); <p>Exemple</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>Dans l'exemple ci-dessus, lorsque vous cliquez avec le bouton droit sur le champ de saisie, l'événement OnContextMenu se déclenchera et d'abord une boîte de dialogue apparaîtra en disant que vous venez d'effectuer un clic droit et après avoir cliqué sur OK dans la boîte de dialogue, le menu contextuel s'ouvrera.</p> <p><strong>Sortir</strong></p> <p>Maintenant, lorsque vous cliquez avec le bouton droit sur le champ de saisie, la boîte de dialogue apparaîtra.</p> <p>Après avoir cliqué sur OK, le menu contextuel s'ouvrira.</p> <p>événement OnFocus</p> <p>L'événement OnFocus se produit lorsqu'un éléments est concentré. Il est principalement utilisé avec, et et . Il ne bouillonne pas et ne peut pas être annulé. Il prend en charge toutes les balises HTML autres que , , <br>, , , <iframe>, , , , , et et est inclus dans DOM Niveau 2.</p> <p><strong>Syntaxe</strong></p> <p>La syntaxe de l'événement OnFocus est la suivante.</p> <p>Syntaxe HTML</p> <element onfocus="functionName"> <p>Syntaxe JavaScript</p> objet.onfocus = function () script; <p>Syntaxe javascript addeventListener ()</p> objet.addEventListener ("focus", script); <p>Exemple</p> <!DOCTYPE html><br><html><br><body><br>Entrez votre nom: <br><p>Une fonction modifie la couleur d'arrière-plan du champ de saisie lorsqu'il est concentré.</p><br><script><br>function abFunction(focus) <br>focus.style.background = "pink";<br><br></script><br></body><br></html> <p><strong>Sortir</strong></p> <p>Lorsque vous cliquez sur le champ de saisie, la couleur d'arrière-plan du champ de saisie sera changée en bleu. Nous avons montré l'état avant et après le champ de saisie ci-dessous.</p> <p><strong>Avant</strong></p> <p><strong>Après</strong></p> <p>Événement OnInput</p> <p>Lorsqu'un utilisateur donne une entrée à un élément, l'événement OnInput se produit. Cet événement ressemble à l'événement OnChange, cependant, ce qui le différencie de l'événement OnChange, c'est qu'il se produit immédiatement après une valeur d'élément. De plus, il peut prendre en charge ,,,,,,, et des balises HTML. Il bubbles mais ne peut pas être annulé et fait partie de DOM version 3.</p> <p><strong>Syntaxe</strong></p> <p>La syntaxe de l'événement OnInput est la suivante.</p> <p>Syntaxe HTML</p> <element oninput="functionName"> <p>Syntaxe JavaScript</p> objet.onInput = function () script; <p>Syntaxe javascript addeventListener ()</p> objet.addEventListener ("entrée", script); <p>Exemple</p> <!DOCTYPE html><br><html><br><body><br>Nom: <br><script><br>function functionName() <br>alert("You just changed the input field value!");<br><br></script><br></body><br></html> <p>Dans l'exemple ci-dessus lorsque vous essayez de modifier la valeur dans le champ de saisie, l'événement OnInput déclenche et une boîte de dialogue apparaît qui vous indique que vous venez de modifier la valeur du champ de saisie.</p> <p><strong>Sortir</strong></p> <p>Dès que vous modifiez la valeur du champ de saisie, le message d'alerte apparaîtra.</p> <p>Événement OnInvalid</p> <p>Lorsqu'un utilisateur donne une entrée qui n'est pas autorisée ou une entrée non valide, l'événement OnInvalid se produit. Cet événement ne bouillonne pas mais peut être annulé. Il prend en charge uniquement la balise HTML et est inclus dans DOM Niveau 3.</p> <p><strong>Syntaxe</strong></p> <p>La syntaxe de l'événement OnInvalid est la suivante.</p> <p>Syntaxe HTML</p> <element oninvalid="functionName"> <p>Syntaxe JavaScript</p> objet.onInvalid = function () script; <p>Syntaxe javascript addeventListener ()</p> objet.addEventListener ("invalid", script); <p>Exemple</p> <!DOCTYPE html><br><html><br><body><br><form><br>Entrez votre nom:<br><br><br></form><br><script><br>function functionName() <br>alert("Name field required!");<br><br></script><br></body><br></html> <p>Dans l'exemple ci-dessus, si vous appuyez sur le bouton Soumettre sans fournir votre nom dans le champ de saisie, l'événement OnInvalid se déclenchera et un message d'alerte apparaîtra pour vous dire que le champ de nom est requis.</p> <p><strong>Sortir</strong></p> <p>Événement ONRESET</p> <p>Lorsqu'un utilisateur réinitialise un formulaire, l'événement OnReset se produit. Cet événement bouillonne et peut être annulé, en outre, il ne prend en charge que le HTML et est inclus dans DOM Version 2.</p> <p><strong>Syntaxe</strong></p> <p>La syntaxe de l'événement ONRESET est la suivante.</p> <p>Syntaxe HTML</p> <element onreset="functionName"> <p>Syntaxe JavaScript</p> objet.onreset = function () script; <p>Syntaxe javascript addeventListener ()</p> objet.addEventListener ("réinitialiser", script); <p>Exemple</p> <!DOCTYPE html><br><html><br><body><br><form onreset="functionName()"><br>Entrez le nom: <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>Dans l'exemple ci-dessus, lorsque vous appuyez sur le bouton de réinitialisation, l'événement OnReset est déclenché et un message d'alerte apparaît et dès que vous appuyez sur le bouton OK dans la boîte de dialogue, le champ d'entrée est effacé.</p> <p><strong>Sortir</strong></p> <p>Lorsque vous appuyez sur le bouton de réinitialisation, le message d'alerte apparaît.</p> <p>Après avoir appuyé sur le bouton OK, le formulaire sera réinitialisé.</p> <p>Événement OnSearch</p> <p>Lorsqu'un utilisateur commence une recherche dans un élément avec type = «Search», l'événement OnSearch se produit. Cet événement ni bulles ni ne peut être annulé, en outre, il ne prend en charge que la balise HTML et est inclus dans DOM Niveau 3.</p> <p><strong>Syntaxe</strong></p> <p>La syntaxe de l'événement OnSearch est la suivante.</p> <p>Syntaxe HTML</p> <element onsearch="functionName"> <p>Syntaxe JavaScript</p> objet.onseaCrh = function () script; <p>Syntaxe javascript addeventListener ()</p> objet.AddeventListener ("Seacrh", script); <p>Exemple</p> <!DOCTYPE html><br><html><br><body><br><p>Tapez ce que vous voulez rechercher et appuyez sur Entrée.</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>Dans l'exemple ci-dessus, lorsque vous tapez quelque chose dans la barre de recherche et appuyez sur Entrée, l'événement OnSearch est déclenché et qu'un message vous indiquera que la recherche a commencé.</p> <p><strong>Sortir</strong></p> <p>Après avoir tapé Google.com dans la barre de recherche et appuyer sur Entrée.</p> <p>Événement OnSelect</p> <p>Il se produit lorsqu'un morceau de texte est sélectionné dans un élément. Ce n'est pas annule et ni bulles. Il prend en charge les balises HTML et est incluse dans DOM Niveau 2.</p> <p><strong>Syntaxe</strong></p> <p>La syntaxe de l'événement OnSelect est la suivante.</p> <p>Syntaxe HTML</p> <element onselect="funtionName()"> <p>Syntaxe JavaScript</p> objet.onSelect = function () script; <p>Syntaxe javascript addeventListener ()</p> objet.addEventListener ("SELECT", script); <p>Exemple</p> <!DOCTYPE html><br><html><br><body><br>Sélectionnez le texte: <br><script><br>function myFunction() <br>alert("Text selected");<br><br></script><br></body><br></html> <p><strong>Sortir</strong></p> <p>Avant de sélectionner.</p> <p>Après avoir sélectionné.</p> <p>événement onSubmit</p> <p>Lorsqu'un utilisateur soumet un formulaire, l'événement onSubmit se produit. Cet événement bouillonne et peut être annulé, en outre, il ne prend en charge que la balise HTML et est inclus dans DOM Level 2.</p> <p><strong>Syntaxe:</strong></p> <p>La syntaxe de l'événement onSubmit est la suivante.</p> <p>Syntaxe HTML:</p> <element onsubmit="funtionName()"> <p>Syntaxe JavaScript:</p> objet.onSubmit = function () script; <p>JavaScript addEventListener () Syntaxe:</p> objet.addEventListener ("soumettre", script); <p>Exemple</p> <!DOCTYPE html><br><html><br><body><br><form action="/action_page.php" onsubmit="functionName()"><br>Entrez le nom: <br><br></form><br><script><br>function functionName() <br>alert("Form submitted!");<br><br></script><br></body><br></html> <p>Dans l'exemple ci-dessus, lorsque vous appuyez sur le bouton Soumettre, l'événement OnSubmit est déclenché et qu'une boîte de dialogue apparaît vous indiquant que le formulaire a été soumis.</p> <p><strong>Sortir</strong></p> <p>Conclusion</p> <p>Les événements qui se produisent lorsqu'un utilisateur interagit avec un formulaire HTML est appelé des événements de formulaire JavaScript. Les événements qui relèvent de la catégorie des événements de formulaire JavaScript sont un événement onblur, un événement onChange, un événement onContextMenu, un événement OnFocus, un événement OnInput, un événement onInvalid, un événement OnReset, un événement onsearch, un événement OnSelect et un événement OnSubmit. Tous ces événements sont discutés en détail avec un exemple approprié. </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://fr.cyberaxe.org/article/javascript-focus-and-blur-events">« Événements JavaScript Focus et flou</a></li> <li class="prev-next__item prev-next__item--right"><a href="http://fr.cyberaxe.org/article/what-is-java">Qu'est-ce que '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://fr.cyberaxe.org/category/c-programming">C programmation C</a> </div> <div class="white-news__name"> <a href="http://fr.cyberaxe.org/article/how-to-print--using-printf-in-c-programming">Comment imprimer% en utilisant printf dans la programmation C?</a> </div> <div class="white-news__text"> L'impression du% symbole dans un programme C utilisant printf () nécessite d'utiliser deux pour cent... </div> <div class="white-news__author"> <a href="http://fr.cyberaxe.org/author/lena-martinez">Lena Martinez</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://fr.cyberaxe.org/category/linux-commands">Commandes Linux</a> </div> <div class="white-news__name"> <a href="http://fr.cyberaxe.org/article/how-to-generate-ssh-keys-on-windows-top-10top-10-to-access-linux-servers-without-passwords">Comment générer des touches SSH sur Windows Top 10 / Top 10 pour accéder aux serveurs Linux sans mot de passe</a> </div> <div class="white-news__text"> Tutoriel pratique sur la façon de générer une touche SSH sur Windows 10 et 11 et l'installez sur un ... </div> <div class="white-news__author"> <a href="http://fr.cyberaxe.org/author/ines-dubois">Ines Dubois</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://fr.cyberaxe.org/category/c">C ++</a> </div> <div class="white-news__name"> <a href="http://fr.cyberaxe.org/article/what-are-identifiers-in-c">Quels sont les identifiants en C++?</a> </div> <div class="white-news__text"> Dans un programme, les identificateurs C ++ sont utilisés pour désigner les noms des variables, des ... </div> <div class="white-news__author"> <a href="http://fr.cyberaxe.org/author/lena-martinez">Lena Martinez</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://fr.cyberaxe.org/category/python">Python</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/remove-special-characters-from-string-python">Supprimer les caractères spéciaux de String Python</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/sarah-roux">Sarah Roux</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://fr.cyberaxe.org/category/postgresql">Postgresql</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/how-to-copy-a-table-from-one-database-to-another-in-postgresql">Comment copier un tableau d'une base de données à une autre dans PostgreSQL</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/lena-martinez">Lena Martinez</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://fr.cyberaxe.org/category/python">Python</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/python-os-mkdir">Python os mkdir</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/nathan-blanc">Nathan Blanc</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://fr.cyberaxe.org/category/docker">Docker</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/how-are-volumes-defined-in-docker-compose-yaml">Comment les volumes sont-ils définis dans Docker Compose Yaml?</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/jules-colin">Jules Colin</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://fr.cyberaxe.org/category/php">php</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/what-is-an-undefined-index-error-in-php-and-how-to-fix-it">Qu'est-ce qu'une erreur d'index non définie en PHP et comment le réparer?</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/lena-martinez">Lena Martinez</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://fr.cyberaxe.org/category/oracle-database">Base de données Oracle</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/how-to-connect-to-oracle-database-top-10c-using-sql-developer">Comment se connecter à la base de données Oracle Top 10C à l'aide du développeur SQL?</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/zoe-martinez">Zoe Martinez</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://fr.cyberaxe.org/category/powershell">Powershell</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/how-to-use-the-write-output-cmdlet-in-powershell">Comment utiliser la commande «écriture-sortie» dans PowerShell?</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/nathan-blanc">Nathan Blanc</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://fr.cyberaxe.org/category/docker">Docker</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/what-docker-registry-is-set-as-the-default">Quel registre Docker est défini par défaut?</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/nathan-blanc">Nathan Blanc</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://fr.cyberaxe.org/category/mysql-mariadb">Mysql mariadb</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/how-to-find-a-specific-character-in-mysql">Comment trouver un personnage spécifique dans MySQL?</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/celia-girard">Célia Girard</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://fr.cyberaxe.org/category/php">php</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/how-to-use-php-getdate-function">Comment utiliser la fonction PHP Getdate</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/ethan-guillot">Ethan Guillot</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="footer"> <div class="footer__about">Un site sur le système d'exploitation Linux. Vous trouverez ici de nombreux articles intéressants et des guides utiles</div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://fr.cyberaxe.org/category/python">Python</a></li> <li class="menu-item"><a href="http://fr.cyberaxe.org/category/postgresql">Postgresql</a></li> <li class="menu-item"><a href="http://fr.cyberaxe.org/category/oracle-linux">Oracle Linux</a></li> <li class="menu-item"><a href="http://fr.cyberaxe.org/category/c">C ++</a></li> <li class="menu-item"><a href="http://fr.cyberaxe.org/category/windows-os">Windows OS</a></li> </li> </ul> </div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://fr.cyberaxe.org/category/docker">Docker</a></li> <li class="menu-item"><a href="http://fr.cyberaxe.org/category/c-sharp">c Sharp</a></li> <li class="menu-item"><a href="http://fr.cyberaxe.org/category/r">R</a></li> <li class="menu-item"><a href="http://fr.cyberaxe.org/category/oracle-database">Base de données Oracle</a></li> </li> <li class="menu-item"><a href="http://fr.cyberaxe.org/all-categories"><b>Toutes catégories</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>