Événements de clavier JavaScript

Jules Colin

Les interactions entre HTML et JavaScript sont définies par des événements. De charger une page à appuyer sur n'importe quelle touche ou à redimensionner une fenêtre, etc. sont tous considérés comme des événements. Les événements JavaScript sont inclus dans HTML DOM version 2 et version 3. Il existe une vaste catégorie d'événements JavaScript qui peuvent se produire en manipulant une page Web via un utilisateur ou le navigateur, cependant, dans cet article, nous parlerons spécifiquement d'événements qui se produisent en utilisant un clavier.

Les événements qui se produisent lorsqu'une touche de clavier est enfoncée sont appelés événements de clavier JavaScript et celles-ci font partie de l'objet clavier. Les événements qui relèvent de la catégorie des événements du clavier sont:

événement onkeydown
Événement OnKeyPress
événement onkeyup

Ici, nous allons allumer ces événements susmentionnés en détail.

événement onkeydown

Lorsqu'une touche de clavier est appuyée sur l'événement Onkeydown se produit. Il bubble et est également annule. Cet événement prend en charge toutes les balises HTML autres que , ,
, , , , , , , , et sont inclus dans DOM version 2.</p> <p><strong>Syntaxe</strong><br>La syntaxe de l'événement OneKeydown est la suivante</p> <p><strong>Syntaxe HTML</strong><br> </p> <p><strong>Syntaxe JavaScript</strong><br>objet.onKeyDown = function () script;</p> <p><strong>Syntaxe javascript addeventListener ()</strong><br>objet.addEventListener («keydown», script); </p> <p>Exemple</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>Dans l'exemple ci-dessus, un champ de saisie a été créé. Alors qu'à l'intérieur du champ de saisie, lorsque l'utilisateur appuie sur une touche de clavier, l'événement onkedown se déclenche et la couleur d'arrière-plan du champ de saisie passera en rose.</p> <p>Sortir</p> <p>Avant d'appuyer sur une touche de clavier.</p> <p>Après avoir appuyé sur une touche de clavier à l'intérieur du champ de saisie.</p> <p>Événement OnKeyPress</p> <p>Lorsqu'une touche de clavier est appuyée sur l'événement OnKeyPress. Il bubble et est également annule. Cet événement prend en charge toutes les balises HTML autres que , , <br>, , , <iframe>, , , , , et sont inclus dans DOM version 2.</p> <p><strong>Syntaxe</strong><br>La syntaxe de l'événement OneKeyPress est la suivante</p> <p><strong>Syntaxe HTML</strong><br> </p> <p><strong>Syntaxe JavaScript</strong><br>objet.onKeyPress = function () script;</p> <p><strong>Syntaxe javascript addeventListener ()</strong><br>objet.addEventListener («keypress», script); </p> <p>Exemple</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>Dans l'exemple ci-dessus, un champ de saisie est en cours. Lorsqu'un utilisateur appuie sur une touche de clavier tout en étant à l'intérieur du champ de saisie, l'événement OnKeyPress se produira et la couleur d'arrière-plan du champ de saisie passera en rose.</p> <p><strong>Sortir</strong><br>Avant d'appuyer sur une touche.</p> <p>Après avoir appuyé sur une touche de clavier, la couleur du fond du champ de saisie change en rose.</p> <p>événement onkeyup</p> <p>Lorsqu'une touche de clavier est publiée, l'événement OnkeyUp se produit. Il bubble et est également annule. Cet événement prend en charge toutes les balises HTML autres que , , <br>, , , <iframe>, , , , , et sont inclus dans DOM version 2.</p> <p><strong>Syntaxe</strong><br>La syntaxe de l'événement OneKeyUps est la suivante</p> <p><strong>Syntaxe HTML</strong><br> </p> <p><strong>Syntaxe JavaScript</strong><br>objet.onKeyUp = function () script;</p> <p><strong>Syntaxe javascript addeventListener ()</strong><br>objet.addEventListener («Keyup», script); </p> <p>Exemple</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>Dans l'exemple ci-dessus, les événements OnKeyDown et OnkeyUp sont démontrés. Un champ de saisie est en cours de création. Lorsque vous appuyez sur une touche, l'événement onkedown est déclenché et la couleur de fond du champ de saisie se transformera en rose et lorsque vous libérez une clé, l'événement OnkeyUp déclenchera et la couleur de fond deviendra jaune.</p> <p><strong>Sortir</strong><br>Lorsque l'utilisateur appuie sur une touche dans le champ de saisie.</p> <p>Après avoir libéré la clé.</p> <p>Conclusion</p> <p>Les événements qui se produisent en raison de l'appuyer sur un bouton du clavier sont appelés événements de souris JavaScript. Les événements qui sont classés dans la catégorie des événements de clavier JavaScript sont un événement onkeydown, un événement onkeypress, un événement onkeyup. Tous ces événements ont des objectifs différents, et ils sont discutés en détail avec des exemples appropriés, dans cet article.</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/java-math-class-methods--explained-with-examples">« Méthodes de classe de mathématiques Java | Expliqué avec des exemples</a></li> <li class="prev-next__item prev-next__item--right"><a href="http://fr.cyberaxe.org/article/javascript-object-accessors">Accessors d'objet 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://fr.cyberaxe.org/category/git">Git</a> </div> <div class="white-news__name"> <a href="http://fr.cyberaxe.org/article/how-to-force-git-checkout">Comment forcer la caisse de Git?</a> </div> <div class="white-news__text"> Pour forcer la caisse GIT, passez au référentiel root git> LS> Démarrer> Git Add> Git Status> et Git... </div> <div class="white-news__author"> <a href="http://fr.cyberaxe.org/author/jules-colin">Jules Colin</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-start-a-multicast-traffic-in-iperf">Comment démarrer un trafic de multidiffusion dans iPerf</a> </div> <div class="white-news__text"> Tutoriel sur la façon de démarrer un trafic de multidiffusion dans IPERF et les commandes IPERF pour... </div> <div class="white-news__author"> <a href="http://fr.cyberaxe.org/author/jules-colin">Jules Colin</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/how-to-use-function-references-in-c">Comment utiliser les références de fonction dans C ++</a> </div> <div class="white-news__text"> Les références de fonction, par rapport aux appels de fonction conventionnels, permettent aux progra... </div> <div class="white-news__author"> <a href="http://fr.cyberaxe.org/author/sarah-roux">Sarah Roux</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/pandas-explode-multiple-columns">Pandas exploser plusieurs colonnes</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/julien-dumas">Julien Dumas</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/pandas-group-by-quantile">Groupe Pandas par quantile</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/julien-dumas">Julien Dumas</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/how-do-i-convert-an-exception-to-a-string-in-python">Comment convertir une exception en une chaîne en python</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/python">Python</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/python-count-characters-in-string">Python Count Caractères en chaîne</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/gabriel-bernard">Gabriel Bernard</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/how-do-i-check-if-a-string-is-empty-in-python">Comment puis-je vérifier si une chaîne est vide en 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/windows-os">Windows OS</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/what-is-windows-package-manager">Qu'est-ce que Windows Package Manager</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/mohamed-benoit">Mohamed Benoit</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://fr.cyberaxe.org/category/r">R</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/how-to-create-an-empty-data-frame-r">Comment créer un cadre de données vide R</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/lena-dupuy">Lena Dupuy</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-get-adprincipalgroupmembership--in-powershell">Comment utiliser Get-AdPrincipalGroupMembership dans PowerShell</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/lena-dupuy">Lena Dupuy</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-while-loop-in-php">Comment utiliser pendant la boucle en php?</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/c">C ++</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/what-is-char-data-type-in-c">Qu'est-ce que le type de données char en C ++</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/lena-dupuy">Lena Dupuy</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>