Focus javascript e eventi sfocati

Artemide Ricci

HTML DOM include vari eventi JavaScript come fare clic su un pulsante, premendo un tasto, massimizzare una finestra, ecc. Sono tutti considerati un evento. Gli eventi sono interazioni tra HTML e JavaScript che si verificano quando una pagina Web viene manipolata dall'utente o dal browser.

Esistono numerose categorie di eventi JavaScript ma in questo articolo enfatizzeremo l'uso di JavaScript Focus e Blur Events.

Quando gli elementi HTML ottengono concentrazione o perdono la concentrazione, si verificano gli eventi di focus o sfocatura JavaScript che fanno parte dell'oggetto focusvent.

Gli eventi classificati nella categoria di JavaScript Focus e Blur Events sono dimostrati di seguito:

Evento OnBur
evento onfocus
evento onfocusin
Evento OnFocUSOUT

Ognuno degli eventi sopra menzionati è discusso di seguito.

Evento OnBur

L'evento OnBur si verifica quando il focus di un oggetto viene perso. Viene utilizzato principalmente all'interno del codice di convalida di un modulo. Non bolle e non può essere cancellato. Supporta tutti i tag HTML diversi da , ,
, , , , , , , , ed è incluso nel livello DOM 2.</p> <p><strong>Sintassi</strong></p> <p>La sintassi dell'evento OnBur è la seguente.</p> <p>Sintassi HTML</p> <element onblur="functionName()"> <p>Sintassi di JavaScript</p> oggetto.onblur = function () script; <p>Sintassi JavaScript addEventListener ()</p> oggetto.addEventListener ("Blur", script); <p>Esempio</p> <!DOCTYPE html><br><html><br><body><br>Inserisci il tuo nome: <br><p>La funzione cambierà lettere minuscole in lettere maiuscole.</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>Produzione</strong></p> <p>Quando si lascia il campo di input, si verifica l'evento OnBur e le lettere minuscole vengono spostate sulla lettera maiuscola.</p> <p>evento onfocus</p> <p>L'evento OnFocus si verifica quando un elemento è focalizzato. È principalmente usato con, e . Non bolle e non può essere cancellato. Supporta tutti i tag HTML diversi da , , <br>, , , <iframe>, , , , , ed è incluso nel livello DOM 2.</p> <p><strong>Sintassi</strong></p> <p>La sintassi dell'evento Onfocus è il seguente.</p> <p>Sintassi HTML</p> <element onfocus="functionName"> <p>Sintassi di JavaScript</p> oggetto.onfocus = function () script; <p>Sintassi JavaScript addEventListener ()</p> oggetto.addEventListener ("Focus", Script); <p>Esempio</p> <!DOCTYPE html><br><html><br><body><br>Inserisci il tuo nome: <br><p>Una funzione cambia il colore di sfondo del campo di input quando è focalizzata.</p><br><script><br>function abFunction(focus) <br>focus.style.background = "pink";<br><br></script><br></body><br></html> <p><strong>Produzione</strong></p> <p>Quando si fa clic sul campo di input, il colore di sfondo del campo di input verrà modificato in blu. Abbiamo mostrato lo stato prima e dopo il campo di input in basso.</p> <p><strong>Prima</strong></p> <p><strong>Dopo</strong></p> <p>evento onfocusin</p> <p>L'evento Onnfocusin è uguale all'evento Onfocus e si verifica quando un elemento ottiene la messa a fuoco, tuttavia una sottile differenza tra questi due è che questo (onfocusin) fa bolle e non può essere annullato. Supporta tutti i tag HTML diversi da , , <br>, , , <iframe>, , , , , ed è incluso nel livello DOM 2.</p> <p><strong>Sintassi</strong></p> <p>La sintassi dell'evento Onfocusin è il seguente.</p> <p>Sintassi HTML</p> <element onfocusin="functionName()"> <p>Sintassi di JavaScript</p> oggetto.onfocusin = function () script; <p>Sintassi JavaScript addEventListener ()</p> oggetto.addEventListener ("focusin", script); <p>Esempio</p> <!DOCTYPE html><br><html><br><body><br>Nome: <br><p>Fai clic sul campo di input</p><br><script><br>function abFunction() <br>document.getElementById("fname").style.backgroundColor = "pink";<br><br></script><br></body><br></html> <p><strong>Produzione</strong></p> <p>Prima di fare clic sul campo di input.</p> <p>Dopo aver fatto clic sul campo di input, il colore di sfondo del campo di input verrà modificato in rosa.</p> <p>Evento OnFocUSOUT</p> <p>L'evento OnnFocUSOUT è uguale all'evento OnBur e si verifica quando un elemento perde solo la messa a fuoco, tuttavia una sottile differenza tra questi due è che questa (onfocusout) bolle e non può essere annullata. Supporta tutti i tag HTML diversi da , , <br>, , , <iframe>, , , , , ed è incluso nel livello DOM 2.</p> <p><strong>Sintassi</strong></p> <p>La sintassi dell'evento OnFocUSOUT è il seguente.</p> <p><strong>Sintassi HTML</strong></p> <element onfocusout="functionName()"> <p>Sintassi di JavaScript</p> oggetto.onfocUSOUT = function () script; <p>Sintassi JavaScript addEventListener ()</p> oggetto.addEventListener ("focusout", script); <p>Esempio</p> <!DOCTYPE html><br><html><br><body><br>Inserisci il tuo nome: <br><p>Lasciare il campo di input per spostare le lettere minuscole in maiuscolo.</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>Produzione</strong></p> <p>Quando si lascia il campo di input, le lettere minuscole verranno spostate sulle lettere maiuscole.</p> <p>Conclusione</p> <p>Gli eventi che si verificano quando un elemento guadagna o perde la sua attenzione sono indicati come focus javascript e eventi sfocati. Gli eventi che sono classificati nella categoria di JavaScript Focus e Blur Events sono eventi OnBur, evento ONFouc, evento OnFocusin ed evento OnFocUSOUT. Tutti questi eventi sono discussi in dettaglio insieme all'esempio appropriato. </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/javascript-bitwise-operators">« Operatori bitwise JavaScript</a></li> <li class="prev-next__item prev-next__item--right"><a href="http://it.cyberaxe.org/article/javascript-form-events">Eventi di forma 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/linux-commands">Comandi Linux</a> </div> <div class="white-news__name"> <a href="http://it.cyberaxe.org/article/how-to-generate-ssh-keys-on-windows-top-10top-10-to-access-linux-servers-without-passwords">Come generare tasti SSH su Windows Top 10/Top 10 per accedere ai server Linux senza password</a> </div> <div class="white-news__text"> Tutorial pratico su come generare un tasto SSH su Windows 10 e 11 e installarlo su un server Linux s... </div> <div class="white-news__author"> <a href="http://it.cyberaxe.org/author/nick-marini">Nick Marini</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-the-arraymerge-function-in-php">Come utilizzare la funzione Array_merge in PHP?</a> </div> <div class="white-news__text"> La funzione Array_merge () in PHP consente di combinare più array in uno. Segui questo articolo per ... </div> <div class="white-news__author"> <a href="http://it.cyberaxe.org/author/osea-martini">Osea Martini</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://it.cyberaxe.org/category/salesforce">Salesforce</a> </div> <div class="white-news__name"> <a href="http://it.cyberaxe.org/article/salesforce-apex---triggers">Salesforce Apex - Trigger</a> </div> <div class="white-news__text"> Tutorial pratico su Salesforce Apex trigger e i diversi exmaples per licenziare il grilletto al mome... </div> <div class="white-news__author"> <a href="http://it.cyberaxe.org/author/nestore-caruso">Nestore Caruso</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/postgresql">Postgresql</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/postgresql-create-index-concurrently">PostgreSQL Crea indice contemporaneamente</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/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/postgresql">Postgresql</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/how-to-copy-a-table-from-one-database-to-another-in-postgresql">Come copiare una tabella da un database a un altro in PostgreSQL</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/python">Pitone</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/matplotlib-2d-histogram">Istogramma 2D Matplotlib</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/docker">Docker</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/what-is-the-difference-between-docker-and-podman">Qual è la differenza tra Docker e Podman?</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/php">PHP</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/how-to-use-php-serialize-function">Come utilizzare la funzione di serializzazione PHP</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/artemide-ricci">Artemide Ricci</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-use-time-now-function-in-golang---examples">Come usare il tempo.Ora funziona in golang - esempi</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/aws">AWS</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/what-is-an-instance-and-how-to-use-it-in-ec2">Cos'è un'istanza e come usarlo in EC2?</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/c">C ++</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/difference-between-private-and-protected-in-c">Differenza tra privato e protetto in C ++</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/php">PHP</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/how-to-use-php-strsplit-function">Come utilizzare la funzione php str_split</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> <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>