JavaScript -tastaturhendelser

Interaksjoner mellom HTML og JavaScript er definert av hendelser. Fra å laste en side til å trykke på en hvilken som helst nøkkel eller endre størrelse på et vindu osv. JavaScript -hendelser er inkludert i HTML DOM versjon 2 og versjon 3. Det er en enorm kategori av JavaScript-hendelser som kan skje ved å manipulere en webside gjennom en bruker eller nettleseren, men i denne oppskrivningen vil vi snakke spesielt om hendelser som skjer ved hjelp av et tastatur.

Hendelsene som skjer når en tastaturnøkkel trykkes blir referert til som JavaScript -tastaturhendelser, og disse er en del av KeyboardEvent -objektet. Hendelsene som faller inn under kategorien tastaturhendelser er:

OnKeyDown -arrangement
OnKeyPress -arrangement
OnKeyup -arrangementet

Her vil vi kaste lys over disse ovennevnte hendelsene i detalj.

OnKeyDown -arrangement

Når en tastaturnøkkel blir trykket på OnKeyDown -hendelsen, skjer. Den bobler og kan også kanselleres. Denne hendelsen støtter alle andre HTML -tagger enn , ,
, , , , , , , , og er inkludert i DOM versjon 2.</p> <p><strong>Syntaks</strong><br>Syntaksen til OneKeyDown -hendelsen er som følger</p> <p><strong>HTML -syntaks</strong><br> </p> <p><strong>JavaScript -syntaks</strong><br>gjenstand.OnKeyDown = funksjon () script;</p> <p><strong>JavaScript AddEventListener () Syntaks</strong><br>gjenstand.AddEventListener (“Keydown”, skript); </p> <p>Eksempel</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>I eksemplet ovenfor er det opprettet et inngangsfelt. Mens inne i inngangsfeltet, når brukeren trykker på en tastaturnøkkel, vil OnKeyDown -hendelsen utløse, og bakgrunnsfargen på inngangsfeltet vil endre seg til rosa.</p> <p>Produksjon</p> <p>Før du trykker på en tastaturtast.</p> <p>Etter å ha trykket på en tastaturtast inne i inngangsfeltet.</p> <p>OnKeyPress -arrangement</p> <p>Når en tastaturnøkkel blir trykket på OnKeyPress -hendelsen, skjer. Den bobler og kan også kanselleres. Denne hendelsen støtter alle andre HTML -tagger enn , , <br>, , , <iframe>, , , , , og er inkludert i DOM versjon 2.</p> <p><strong>Syntaks</strong><br>Syntaksen til OneKeyPress -arrangementet er som følger</p> <p><strong>HTML -syntaks</strong><br> </p> <p><strong>JavaScript -syntaks</strong><br>gjenstand.OnKeyPress = funksjon () script;</p> <p><strong>JavaScript AddEventListener () Syntaks</strong><br>gjenstand.AddEventListener (“KeyPress”, manus); </p> <p>Eksempel</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>I eksemplet ovenfor opprettes det et inngangsfelt. Når en bruker trykker på en tastaturnøkkel mens han er inne i inngangsfeltet, vil OnkeyPress -hendelsen skje, og bakgrunnsfargen på inngangsfeltet vil endre seg til rosa.</p> <p><strong>Produksjon</strong><br>Før du trykker på en nøkkel.</p> <p>Etter å ha trykket på en tastaturnøkkel, endres inngangsfeltets bakgrunnsfarge til rosa.</p> <p>OnKeyup -arrangementet</p> <p>Når en tastaturnøkkel er utgitt, skjer OnKeyup -arrangementet. Den bobler og kan også kanselleres. Denne hendelsen støtter alle andre HTML -tagger enn , , <br>, , , <iframe>, , , , , og er inkludert i DOM versjon 2.</p> <p><strong>Syntaks</strong><br>Syntaksen til Oneyups -hendelsen er som følger</p> <p><strong>HTML -syntaks</strong><br> </p> <p><strong>JavaScript -syntaks</strong><br>gjenstand.OnKeyUp = funksjon () script;</p> <p><strong>JavaScript AddEventListener () Syntaks</strong><br>gjenstand.AddEventListener (“Keyup”, skript); </p> <p>Eksempel</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>I eksemplet ovenfor demonstreres både OnKeyDown og OnKeyup -arrangementer. Det opprettes et inngangsfelt. Når du trykker på en tast, blir OnKeyDown -hendelsen utløst, og inngangsfeltets bakgrunnsfarge vil bli til rosa, og når du slipper en nøkkel, vil OnKeyup -hendelsen utløse og bakgrunnsfargen blir gul.</p> <p><strong>Produksjon</strong><br>Når brukeren trykker på en nøkkel i inngangsfeltet.</p> <p>Etter å ha sluppet nøkkelen.</p> <p>Konklusjon</p> <p>Hendelser som oppstår på grunn av å trykke på en tastaturknapp blir referert til som JavaScript -mushendelser. Hendelser som er klassifisert i kategorien JavaScript -tastaturhendelser er OnKeyDown -arrangement, OnKeyPress -arrangement, OnKeyup -arrangement. Alle disse hendelsene har forskjellige formål, og de blir diskutert i detalj sammen med passende eksempler, i denne oppskrivningen.</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://no.cyberaxe.org/article/java-math-class-methods--explained-with-examples">« Java Math Class Methods | Forklart med eksempler</a></li> <li class="prev-next__item prev-next__item--right"><a href="http://no.cyberaxe.org/article/javascript-object-accessors">JavaScript -objekttilbehør »</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://no.cyberaxe.org/category/debian">Debian</a> </div> <div class="white-news__name"> <a href="http://no.cyberaxe.org/article/how-to-change-from-default-to-alternative-python-version-on-debian">Hvordan du endrer fra standard til alternativ python -versjon på Debian</a> </div> <div class="white-news__text"> Du kan endre fra standard til alternativ Python-versjon på Debian når som helst fra kommandoen “-Upd... </div> <div class="white-news__author"> <a href="http://no.cyberaxe.org/author/jorgen-christiansen">Jørgen Christiansen</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://no.cyberaxe.org/category/git">Git</a> </div> <div class="white-news__name"> <a href="http://no.cyberaxe.org/article/git-stash-command-in-git--explained">git-stash kommando i git | Forklart</a> </div> <div class="white-news__text"> Kommandoen Git Stash brukes til å spare uplagte endringer som brukerne har gjort i arbeidskopien sin... </div> <div class="white-news__author"> <a href="http://no.cyberaxe.org/author/oskar-fossum">Oskar Fossum</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://no.cyberaxe.org/category/bash-programming">Bash -programmering</a> </div> <div class="white-news__name"> <a href="http://no.cyberaxe.org/article/how-to-add-a-new-element-to-an-array-without-specifying-the-index-in-bash">Hvordan legge til et nytt element i en matrise uten å spesifisere indeksen i bash</a> </div> <div class="white-news__text"> For å legge til et nytt element i en matrise uten å spesifisere indeksen i bash, bruk += operatøren ... </div> <div class="white-news__author"> <a href="http://no.cyberaxe.org/author/elias-aalerud-aasen">Elias Aalerud Aasen</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://no.cyberaxe.org/category/postgresql">PostgreSql</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/postgresql-create-index-concurrently">PostgreSQL opprette indeks samtidig</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/lars-solberg">Lars Solberg</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/python">Python</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/how-to-unzip-files-in-python">Hvordan pakke ut filer i Python</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/mathias-halvorsen">Mathias Halvorsen</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/oracle-database">Oracle Database</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/how-oracle-database-is-different-from-oracle-sql-developer">Hvordan Oracle Database er forskjellig fra Oracle SQL Developer?</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/anders-fjeld-moe">Anders Fjeld Moe</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/c-sharp">C skarp</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/how-lambda-operator--is-used-in-c">Hvordan lambda operatør '=>' brukes i C#</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/daniel-johnsen">Daniel Johnsen</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/c-programming">C programmering</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/books-and-guides-for-c-language">Bøker og guider for C -språk</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/oskar-fossum">Oskar Fossum</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/golang">Golang</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/what-are-packages-in-golang">Hva er pakker i Golang?</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/mathias-halvorsen">Mathias Halvorsen</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/php">PHP</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/how-to-use-scandir-function-in-php">Hvordan bruke Scandir -funksjonen i PHP</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/elias-krogh-svendsen">Elias Krogh Svendsen</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/c">C ++</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/what-is--in-c">Hva er += i C++?</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/oskar-fossum">Oskar Fossum</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/powershell">Kraftskall</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/how-to-use-the-get-command-command-in-powershell">Hvordan bruke kommandoen “Get-Command” i PowerShell</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/lars-solberg">Lars Solberg</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/git">Git</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/how-to-rewrite-most-recent-commit-history-in-git">Hvordan omskrive den siste forpliktelseshistorien i Git?</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/elias-krogh-svendsen">Elias Krogh Svendsen</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="footer"> <div class="footer__about">Et nettsted om Linux-operativsystemet. Her finner du mange interessante artikler og nyttige guider</div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://no.cyberaxe.org/category/python">Python</a></li> <li class="menu-item"><a href="http://no.cyberaxe.org/category/postgresql">PostgreSql</a></li> <li class="menu-item"><a href="http://no.cyberaxe.org/category/oracle-linux">Oracle Linux</a></li> <li class="menu-item"><a href="http://no.cyberaxe.org/category/c">C ++</a></li> <li class="menu-item"><a href="http://no.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://no.cyberaxe.org/category/docker">Docker</a></li> <li class="menu-item"><a href="http://no.cyberaxe.org/category/c-sharp">C skarp</a></li> <li class="menu-item"><a href="http://no.cyberaxe.org/category/r">R</a></li> <li class="menu-item"><a href="http://no.cyberaxe.org/category/oracle-database">Oracle Database</a></li> </li> <li class="menu-item"><a href="http://no.cyberaxe.org/all-categories"><b>Alle Kategorier</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>