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/php">PHP</a> </div> <div class="white-news__name"> <a href="http://no.cyberaxe.org/article/how-to-use-php-strsplit-function">Hvordan du bruker php str_split -funksjon</a> </div> <div class="white-news__text"> PHP Str_SPlit () -funksjonen er et nyttig verktøy for å dele opp strenger i individuelle tegn eller ... </div> <div class="white-news__author"> <a href="http://no.cyberaxe.org/author/simen-odegard">Simen Ødegård</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://no.cyberaxe.org/category/golang">Golang</a> </div> <div class="white-news__name"> <a href="http://no.cyberaxe.org/article/how-to-trim-a-string-in-golang">Hvordan trimme en streng i Golang</a> </div> <div class="white-news__text"> Strengtrimming er en prosess for å fjerne ekstra mellomrom eller tegn fra begynnelsen eller slutten ... </div> <div class="white-news__author"> <a href="http://no.cyberaxe.org/author/anders-fjeld-moe">Anders Fjeld Moe</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://no.cyberaxe.org/category/golang">Golang</a> </div> <div class="white-news__name"> <a href="http://no.cyberaxe.org/article/what-are-constants-in-golang">Hva er konstanter i Golang?</a> </div> <div class="white-news__text"> På GO -språket er konstanter variabler med faste verdier som ikke kan endres under utførelse av prog... </div> <div class="white-news__author"> <a href="http://no.cyberaxe.org/author/oskar-fossum">Oskar Fossum</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/pandas-to-latex">Pandas til latex</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/daniel-berntsen">Daniel Berntsen</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/seaborn-tsplot">Seaborn Tsplot</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/c">C ++</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/how-to-use-chrono-in-c">Hvordan bruke Chrono i C++?</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/javascript">JavaScript</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/how-does-onclick-event-work-in-javascript">Hvordan fungerer OnClick -arrangementet i JavaScript</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/jorgen-christiansen">Jørgen Christiansen</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/how-to-convert-string-to-integer-type-in-golang">Hvordan konvertere streng til heltallstype i Golang?</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/php">PHP</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/how-to-fetch-php-timezone-list">Hvordan hente PHP Timezone List</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/elias-aalerud-aasen">Elias Aalerud Aasen</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/how-to-use-time-now-function-in-golang---examples">Hvordan bruke tid.Funksjon i Golang - eksempler</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/java">Java</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/how-to-convert-a-map-to-a-string-in-java">Hvordan konvertere et kart til en streng i Java?</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/powershell">Kraftskall</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/can-you-explain-the-functionality-of-powershells-get-location-command">Kan du forklare funksjonaliteten til PowerShells kommando?</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>