Eventi di tastiera JavaScript

Le interazioni tra HTML e JavaScript sono definite da eventi. Dal caricamento di una pagina alla pressione di qualsiasi tasto o al ridimensionamento di una finestra ecc. Sono tutti considerati eventi. Gli eventi JavaScript sono inclusi in HTML DOM versione 2 e versione 3. Esiste una vasta categoria di eventi JavaScript che possono verificarsi manipolando una pagina web tramite un utente o il browser, tuttavia, in questo articolo, parleremo specificamente di eventi che si verificano usando una tastiera.

Gli eventi che si verificano quando viene premuto un tasto tastiera vengono indicati come eventi di tastiera JavaScript e questi fanno parte dell'oggetto tastiera. Gli eventi che rientrano nella categoria degli eventi della tastiera sono:

Evento OnKeyDown
Evento OnKeyPress
Evento OnKeyup

Qui getteremo la luce su questi eventi sopra menzionati in dettaglio.

Evento OnKeyDown

Quando viene premuto un tasto tastiera, si verifica l'evento OnKeyDown. Fa bolle ed è anche cancellabile. Questo evento supporta tutti i tag HTML diversi da , ,
, , , , , , , , e sono inclusi nella versione Dom 2.</p> <p><strong>Sintassi</strong><br>La sintassi dell'evento OneKeyDown è la seguente</p> <p><strong>Sintassi HTML</strong><br> </p> <p><strong>Sintassi di JavaScript</strong><br>oggetto.onkeydown = function () script;</p> <p><strong>Sintassi JavaScript addEventListener ()</strong><br>oggetto.addEventListener ("keydown", script); </p> <p>Esempio</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>Nell'esempio sopra, è stato creato un campo di input. Mentre all'interno del campo di input, quando l'utente preme un tasto tastiera, l'evento OnKeyDown si attiverà e il colore di sfondo del campo di input cambierà in rosa.</p> <p>Produzione</p> <p>Prima di premere un tasto tastiera.</p> <p>Dopo aver premuto un tasto tastiera all'interno del campo di input.</p> <p>Evento OnKeyPress</p> <p>Quando viene premuto un tasto tastiera, si verifica l'evento OnKeyPress. Fa bolle ed è anche cancellabile. Questo evento supporta tutti i tag HTML diversi da , , <br>, , , <iframe>, , , , , e sono inclusi nella versione Dom 2.</p> <p><strong>Sintassi</strong><br>La sintassi dell'evento OneKeyPress è la seguente</p> <p><strong>Sintassi HTML</strong><br> </p> <p><strong>Sintassi di JavaScript</strong><br>oggetto.onkeypress = function () script;</p> <p><strong>Sintassi JavaScript addEventListener ()</strong><br>oggetto.addEventListener ("keypress", script); </p> <p>Esempio</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>Nell'esempio sopra, viene creato un campo di input. Quando un utente preme un tasto tastiera mentre si trova all'interno del campo di input, si verificherà l'evento OnKeyPress e il colore di sfondo del campo di input cambierà in rosa.</p> <p><strong>Produzione</strong><br>Prima di premere un tasto.</p> <p>Dopo aver premuto un tasto tastiera, il colore dello sfondo del campo di input cambia in rosa.</p> <p>Evento OnKeyup</p> <p>Quando viene rilasciata una chiave di tastiera, si verifica l'evento OnKeyup. Fa bolle ed è anche cancellabile. Questo evento supporta tutti i tag HTML diversi da , , <br>, , , <iframe>, , , , , e sono inclusi nella versione Dom 2.</p> <p><strong>Sintassi</strong><br>La sintassi dell'evento OneKeyups è la seguente</p> <p><strong>Sintassi HTML</strong><br> </p> <p><strong>Sintassi di JavaScript</strong><br>oggetto.onkeyup = function () script;</p> <p><strong>Sintassi JavaScript addEventListener ()</strong><br>oggetto.addEventListener ("keyup", script); </p> <p>Esempio</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>Nell'esempio sopra, sono dimostrati sia gli eventi OnKeyDown che. Viene creato un campo di input. Quando si preme un tasto, l'evento OnKeyDown viene attivato e il colore dello sfondo del campo di input si trasformerà in rosa e quando si rilascia un tasto, l'evento OnKeyup si attiverà e il colore di sfondo diventerà giallo.</p> <p><strong>Produzione</strong><br>Quando l'utente preme un tasto nel campo di input.</p> <p>Dopo aver rilasciato la chiave.</p> <p>Conclusione</p> <p>Gli eventi che si verificano a causa della pressione di un pulsante tastiera sono indicati come eventi javascript mouse. Gli eventi classificati nella categoria degli eventi di tastiera JavaScript sono eventi OnKeyDown, evento OnKeyPress, evento OnKeyup. Tutti questi eventi hanno scopi diversi e sono discussi in dettaglio insieme ad esempi appropriati, in questo articolo.</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://it.cyberaxe.org/article/java-math-class-methods--explained-with-examples">« Metodi di classe di matematica Java | Spiegato con esempi</a></li> <li class="prev-next__item prev-next__item--right"><a href="http://it.cyberaxe.org/article/javascript-object-accessors">Accessori di oggetti 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://it.cyberaxe.org/category/debian">Debian</a> </div> <div class="white-news__name"> <a href="http://it.cyberaxe.org/article/how-to-change-username-on-debian-top-10-bullseye">Come cambiare il nome utente sulla top 10 di Debian Bullseye</a> </div> <div class="white-news__text"> Puoi cambiare il nome utente su Debian da Terminal o GUI. Questo articolo fornisce una guida dettagl... </div> <div class="white-news__author"> <a href="http://it.cyberaxe.org/author/dr-ursula-marini">Dr. Ursula Marini</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://it.cyberaxe.org/category/c">C ++</a> </div> <div class="white-news__name"> <a href="http://it.cyberaxe.org/article/how-to-fix-error-with-multiple-definitions-of-a-function-in-c">Come correggere l'errore con più definizioni di una funzione in C ++</a> </div> <div class="white-news__text"> Per fissare il... </div> <div class="white-news__author"> <a href="http://it.cyberaxe.org/author/nunzia-martini">Nunzia Martini</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://it.cyberaxe.org/category/c">C ++</a> </div> <div class="white-news__name"> <a href="http://it.cyberaxe.org/article/how-to-use-function-references-in-c">Come utilizzare i riferimenti di funzione in C ++</a> </div> <div class="white-news__text"> I riferimenti alla funzione, rispetto alle chiamate di funzione convenzionali, consentono ai program... </div> <div class="white-news__author"> <a href="http://it.cyberaxe.org/author/nick-marini">Nick Marini</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://it.cyberaxe.org/category/python">Pitone</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/how-do-i-check-if-a-string-is-empty-in-python">Come faccio a controllare se una stringa è vuota in Python</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/nunzia-martini">Nunzia Martini</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/docker">Docker</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/how-are-volumes-defined-in-docker-compose-yaml">Come vengono definiti i volumi in Docker composi yaml?</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/nunzia-martini">Nunzia Martini</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/docker">Docker</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/how-can-i-list-all-docker-commands">Come posso elencare tutti i comandi Docker?</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/sig-valdo-marchetti">Sig. Valdo Marchetti</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/docker">Docker</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/how-to-login-into-docker-via-command-prompt">Come accedere a Docker tramite il prompt dei comandi?</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/cristyn-de-santis">Cristyn De Santis</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/golang">Golang</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/how-to-trim-a-string-in-golang">Come tagliare una corda in golang</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/dante-palumbo">Dante Palumbo</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/c-programming">Programmazione C</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/how-to-print-an-address-of-a-variable-in-c-programming">Come stampare un indirizzo di una variabile nella programmazione C?</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/nick-marini">Nick Marini</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/php">PHP</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/how-to-use-while-loop-in-php">Come usare mentre loop in PHP?</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/nick-marini">Nick Marini</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/c">C ++</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/what-is-memory-address-in-c-and-how-to-find-it">Cos'è l'indirizzo di memoria in C ++ e come trovarlo?</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/felicia-giuliani">Felicia Giuliani</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/c">C ++</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/what-is--in-c">Cosa è += in c++?</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/nunzia-martini">Nunzia Martini</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/java">Giava</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/java-dom-parser-examples-to-parse-xml">Esempi di parser Java Dom per analizzare XML</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/osea-martini">Osea Martini</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="footer"> <div class="footer__about">Un sito sul sistema operativo Linux. Qui troverai molti articoli interessanti e guide utili</div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://it.cyberaxe.org/category/python">Pitone</a></li> <li class="menu-item"><a href="http://it.cyberaxe.org/category/postgresql">Postgresql</a></li> <li class="menu-item"><a href="http://it.cyberaxe.org/category/oracle-linux">Oracle Linux</a></li> <li class="menu-item"><a href="http://it.cyberaxe.org/category/c">C ++</a></li> <li class="menu-item"><a href="http://it.cyberaxe.org/category/windows-os">OS Windows</a></li> </li> </ul> </div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://it.cyberaxe.org/category/docker">Docker</a></li> <li class="menu-item"><a href="http://it.cyberaxe.org/category/c-sharp">c affilato</a></li> <li class="menu-item"><a href="http://it.cyberaxe.org/category/r">R</a></li> <li class="menu-item"><a href="http://it.cyberaxe.org/category/oracle-database">Oracle Database</a></li> </li> <li class="menu-item"><a href="http://it.cyberaxe.org/all-categories"><b>Tutte le categorie</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>