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/c-sharp">c affilato</a> </div> <div class="white-news__name"> <a href="http://it.cyberaxe.org/article/what-are-escape-sequences-in-c">Quali sono le sequenze di fuga in C#</a> </div> <div class="white-news__text"> La sequenza di fuga in C# è una sequenza di caratteri che rappresenta un significato speciale se usa... </div> <div class="white-news__author"> <a href="http://it.cyberaxe.org/author/dante-palumbo">Dante Palumbo</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://it.cyberaxe.org/category/php">PHP</a> </div> <div class="white-news__name"> <a href="http://it.cyberaxe.org/article/how-to-use-scandir-function-in-php">Come utilizzare la funzione Scandir in PHP</a> </div> <div class="white-news__text"> La funzione Scandir () in PHP scansiona una directory per file e directory. Restituisce un array di ... </div> <div class="white-news__author"> <a href="http://it.cyberaxe.org/author/dr-folco-leone">Dr. Folco Leone</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://it.cyberaxe.org/category/c-programming">Programmazione C</a> </div> <div class="white-news__name"> <a href="http://it.cyberaxe.org/article/what-is-memory-address-in-c-programming-and-how-to-find-it">Cos'è l'indirizzo di memoria nella programmazione C e come trovarlo?</a> </div> <div class="white-news__text"> Indirizzo di memoria nella programmazione C si riferisce alla posizione in cui i dati sono archiviat... </div> <div class="white-news__author"> <a href="http://it.cyberaxe.org/author/dr-folco-leone">Dr. Folco Leone</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/filter-nan-pandas">Filtro nan panda</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/dr-ursula-marini">Dr. Ursula 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/array-of-structs-in-c">Array di strutture in C ++</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/dr-evita-damico">Dr. Evita Damico</a> </div> </div> </div> </div> <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/python-finds-the-index-of-all-occurrences-in-a-list">Python trova l'indice di tutte le occorrenze in un elenco</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/dr-ursula-marini">Dr. Ursula Marini</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/what-are-structures-in-golang">Quali sono le strutture di Golang</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> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/sqlite">Sqlite</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/how-to-use-sqlite-viewer-web-app">Come utilizzare l'app Web SQLite Viewer</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/aws">AWS</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/what-is-the-difference-between-aws-aurora-and-mysql">Qual è la differenza tra AWS Aurora e MySQL?</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/dr-evita-damico">Dr. Evita Damico</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/git">Idiota</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/how-to-generate-a-git-file-using-terminal--explained">Come generare un file GIT utilizzando il terminale? | Spiegato</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/dr-folco-leone">Dr. Folco Leone</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/c-sharp">c affilato</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/conditions-and-if-then-statements-in-c">Condizioni e se poi dichiarazioni in C#</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/c-programming">Programmazione C</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/what-are-strings-in-c-programming">Cosa sono le stringhe nella programmazione C?</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/c">C ++</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/what-are-identifiers-in-c">Cosa sono gli identificatori in C++?</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/sarita-negri">Sarita Negri</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>