JavaScript Focus og uskarpe hendelser

HTML DOM inkluderer forskjellige JavaScript -hendelser som å klikke på en knapp, trykke på en tast, maksimere et vindu osv. Hendelser er interaksjoner mellom HTML og JavaScript som skjer når en webside blir manipulert av enten brukeren eller nettleseren.

Det er mange kategorier av JavaScript -hendelser, men i denne artikkelen vil vi understreke bruken av JavaScript Focus og uskarpe hendelser.

Når HTML -elementer får fokus eller mister fokus, skjer JavaScript -fokuset eller uskarpe hendelser som er en del av Focusevent -objektet.

Hendelsene som er klassifisert i kategorien JavaScript Focus og Blur -hendelser er demonstrert nedenfor:

Onblur -arrangementet
Onfocus -arrangement
Onfocusin -hendelse
Onfocusout -arrangement

Hver av de ovennevnte hendelsene er diskutert nedenfor.

Onblur -arrangementet

Onblur -hendelsen skjer når fokuset til et objekt går tapt. Det brukes mest i valideringskoden til et skjema. Den bobler ikke og kan ikke kanselleres. Den støtter alle andre HTML -tagger enn , ,
, , , , , , , , og er inkludert i DOM -nivå 2.</p> <p><strong>Syntaks</strong></p> <p>Syntaks av Onblur -hendelsen er som følger.</p> <p>HTML -syntaks</p> <element onblur="functionName()"> <p>JavaScript -syntaks</p> gjenstand.onblur = funksjon () script; <p>JavaScript AddEventListener () Syntaks</p> gjenstand.AddEventListener ("Blur", manus); <p>Eksempel</p> <!DOCTYPE html><br><html><br><body><br>Skriv inn navnet ditt: <br><p>Funksjonen vil endre små bokstaver til store bokstaver.</p><br><script><br>function myFunc() <br>var x = document.getElementById("fname");<br>x.value = x.value.toUpperCase();<br><br></script><br></body><br></html> <p><strong>Produksjon</strong></p> <p>Når du forlater inngangsfeltet, oppstår onblur-hendelsen og brevene med lavere tilfeller blir flyttet til øvre sakbrev.</p> <p>Onfocus -arrangement</p> <p>Onfocus -hendelsen skjer når et elementer er fokusert. Det brukes stort sett med, og . Den bobler ikke og kan ikke kanselleres. Den støtter alle andre HTML -tagger enn , , <br>, , , <iframe>, , , , , og er inkludert i DOM -nivå 2.</p> <p><strong>Syntaks</strong></p> <p>Syntaks av Onfocus -hendelsen er som følger.</p> <p>HTML -syntaks</p> <element onfocus="functionName"> <p>JavaScript -syntaks</p> gjenstand.OnFocus = funksjon () script; <p>JavaScript AddEventListener () Syntaks</p> gjenstand.AddEventListener ("Fokus", manus); <p>Eksempel</p> <!DOCTYPE html><br><html><br><body><br>Skriv inn navnet ditt: <br><p>En funksjon endrer bakgrunnsfargen på inngangsfeltet når den er fokusert.</p><br><script><br>function abFunction(focus) <br>focus.style.background = "pink";<br><br></script><br></body><br></html> <p><strong>Produksjon</strong></p> <p>Når du klikker på inngangsfeltet, vil bakgrunnsfargen på inngangsfeltet bli endret til blå. Vi har vist før og etter tilstanden til inngangsfeltet nedenfor.</p> <p><strong>Før</strong></p> <p><strong>Etter</strong></p> <p>Onfocusin -hendelse</p> <p>Onnfocusin -hendelsen er den samme som Onfocus -hendelsen og skjer når et element bare får fokus. Den støtter alle andre HTML -tagger enn , , <br>, , , <iframe>, , , , , og er inkludert i DOM -nivå 2.</p> <p><strong>Syntaks</strong></p> <p>Syntaks av Onfocusin -hendelsen er som følger.</p> <p>HTML -syntaks</p> <element onfocusin="functionName()"> <p>JavaScript -syntaks</p> gjenstand.onFocusin = funksjon () script; <p>JavaScript AddEventListener () Syntaks</p> gjenstand.AddEventListener ("Focusin", manus); <p>Eksempel</p> <!DOCTYPE html><br><html><br><body><br>Navn: <br><p>Klikk på inngangsfeltet</p><br><script><br>function abFunction() <br>document.getElementById("fname").style.backgroundColor = "pink";<br><br></script><br></body><br></html> <p><strong>Produksjon</strong></p> <p>Før du klikker på inngangsfeltet.</p> <p>Etter å ha klikket på inngangsfeltet, vil bakgrunnsfargen på inngangsfeltet bli endret til rosa.</p> <p>Onfocusout -arrangement</p> <p>Onnfocusout -hendelsen er den samme som Onblur -hendelsen og skjer når et element bare mister fokus. Den støtter alle andre HTML -tagger enn , , <br>, , , <iframe>, , , , , og er inkludert i DOM -nivå 2.</p> <p><strong>Syntaks</strong></p> <p>Syntaks av Onfocusout -hendelsen er som følger.</p> <p><strong>HTML -syntaks</strong></p> <element onfocusout="functionName()"> <p>JavaScript -syntaks</p> gjenstand.OnFocusout = funksjon () script; <p>JavaScript AddEventListener () Syntaks</p> gjenstand.AddEventListener ("Focusout", manus); <p>Eksempel</p> <!DOCTYPE html><br><html><br><body><br>Skriv inn navnet ditt: <br><p>La inngangsfeltet for å skifte bokstaver til øvre sak til øvre sak.</p><br><script><br>function abFunction() <br>var out = document.getElementById("fname");<br>out.value = out.value.toUpperCase();<br><br></script><br></body><br></html> <p><strong>Produksjon</strong></p> <p>Når du forlater inngangsfeltet, blir brevene i små bokstaver flyttet til store bokstaver.</p> <p>Konklusjon</p> <p>Hendelser som oppstår når et element vinner eller mister fokuset blir referert til som JavaScript Focus og uskarpe hendelser. Hendelser som er klassifisert i kategorien JavaScript Focus og Blur -arrangementer er Onblur Event, Onfouc Event, Onfocusin Event og OnFocusout Event. Alle disse hendelsene blir diskutert i detalj sammen med passende eksempel. </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/javascript-bitwise-operators">« JavaScript bitvis operatører</a></li> <li class="prev-next__item prev-next__item--right"><a href="http://no.cyberaxe.org/article/javascript-form-events">JavaScript -skjema hendelser »</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/linux-commands">Linux -kommandoer</a> </div> <div class="white-news__name"> <a href="http://no.cyberaxe.org/article/how-to-generate-ssh-keys-on-windows-top-10top-10-to-access-linux-servers-without-passwords">Hvordan generere SSH -nøkler på Windows Top 10/Top 10 for å få tilgang til Linux -servere uten passord</a> </div> <div class="white-news__text"> Praktisk opplæring om hvordan du genererer en SSH -tast på Windows 10 og 11 og installer den på en L... </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/c-programming">C programmering</a> </div> <div class="white-news__name"> <a href="http://no.cyberaxe.org/article/if-else-statement-in-c-programming">if-ests-uttalelse i C-programmering</a> </div> <div class="white-news__text"> IF-Else-uttalelsen er et avgjørende konsept innen C-programmering som tillater beslutninger basert p... </div> <div class="white-news__author"> <a href="http://no.cyberaxe.org/author/tobias-andresen">Tobias Andresen</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://no.cyberaxe.org/category/c">C ++</a> </div> <div class="white-news__name"> <a href="http://no.cyberaxe.org/article/how-to-use-subtraction-assignment--operator-in-c">Hvordan bruke subtraksjonsoppgaveoperatør i C ++</a> </div> <div class="white-news__text"> I C ++ er -= en subtraksjonsoppgaveoperatør, trekker den til to motsatte sideverdier fra tildelingso... </div> <div class="white-news__author"> <a href="http://no.cyberaxe.org/author/martin-berge">Martin Berge</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/python">Python</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/pandas-explode-multiple-columns">Pandas eksploderer flere kolonner</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/alexander-sorlie">Alexander Sørlie</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-group-by-quantile">Pandas Group etter kvantil</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/python-os-path-expanduser-method">Python OS.sti.ExpandUser -metoden</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/python">Python</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/python-finds-the-index-of-all-occurrences-in-a-list">Python finner indeksen for alle forekomster i en liste</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/python">Python</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/matplotlib-2d-histogram">Matplotlib 2D -histogram</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/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/javascript">JavaScript</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/how-to-use-mouseevent-screenx-property-in-javascript">Hvordan bruke MouseEvent ScreenX -egenskap i JavaScript</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/erik-roed">Erik Røed</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/aws">Aws</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/what-is-the-difference-between-aws-aurora-and-mysql">Hva er forskjellen mellom AWS Aurora og MySQL?</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/powershell">Kraftskall</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/how-to-use-the-sort-object-cmdlet-in-powershell">Hvordan bruke sorteringsobjektet Cmdlet 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/c-sharp">C skarp</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/how-to-use-long-keyword-in-c">Hvordan bruke langt søkeord i C#</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> <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>