Wydarzenia JavaScript Focus i Blur

HTML DOM zawiera różne zdarzenia JavaScript, takie jak kliknięcie przycisku, naciśnięcie klawisza, maksymalizacja okna itp. Zdarzenia są interakcjami między HTML i JavaScript, które zdarzają się, gdy strona internetowa jest manipulowana przez użytkownika lub przeglądarkę.

Istnieje wiele kategorii zdarzeń JavaScript, ale w tym artykule podkreślymy użycie wydarzeń JavaScript i rozmycia.

Kiedy elementy HTML zyskują skupienie lub stracić koncentrację, zdarzenia JavaScript lub zdarzenia rozmycia, które są częścią obiektu FocusEvent.

Wydarzenia, które są sklasyfikowane w kategorii koncentracji JavaScript i zdarzeń rozmycia, pokazano poniżej:

Wydarzenie Onblur
Wydarzenie Onfocus
Wydarzenie Onfocusin
wydarzenie Onfocusout

Każde z wyżej wymienionych wydarzeń omówiono poniżej.

Wydarzenie Onblur

Zdarzenie Onblur ma miejsce, gdy koncentracja obiektu zostanie utracona. Jest go głównie używany w kodzie sprawdzania poprawności formularza. Nie bulgot i nie można go anulować. Obsługuje wszystkie tagi HTML inne niż , ,
, , , , , , , , i jest zawarty na poziomie DOM 2.</p> <p><strong>Składnia</strong></p> <p>Składnia zdarzenia onblur jest następująca.</p> <p>Składnia HTML</p> <element onblur="functionName()"> <p>Składnia JavaScript</p> obiekt.onBlur = function () script; <p>Składnia JavaScript addEventListener ()</p> obiekt.addEventListener („Blur”, skrypt); <p>Przykład</p> <!DOCTYPE html><br><html><br><body><br>Wpisz swoje imię: <br><p>Funkcja zmieni litery dolnej wielkości na litery górne.</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>Wyjście</strong></p> <p>Po opuszczeniu pola wejściowego występuje zdarzenie onblur, a litery dolnej kazania są przesuwane na literę górną.</p> <p>Wydarzenie Onfocus</p> <p>Zdarzenie Onfocus ma miejsce, gdy elementy są skupione. Jest najczęściej używany z, i . Nie bulgot i nie można go anulować. Obsługuje wszystkie tagi HTML inne niż , , <br>, , , <iframe>, , , , , i jest zawarty na poziomie DOM 2.</p> <p><strong>Składnia</strong></p> <p>Składnia zdarzenia onfocus jest następująca.</p> <p>Składnia HTML</p> <element onfocus="functionName"> <p>Składnia JavaScript</p> obiekt.onfocus = function () script; <p>Składnia JavaScript addEventListener ()</p> obiekt.addEventListener („Focus”, skrypt); <p>Przykład</p> <!DOCTYPE html><br><html><br><body><br>Wpisz swoje imię: <br><p>Funkcja zmienia kolor tła pola wejściowego, gdy jest ono skupione.</p><br><script><br>function abFunction(focus) <br>focus.style.background = "pink";<br><br></script><br></body><br></html> <p><strong>Wyjście</strong></p> <p>Po kliknięciu pola wejściowego kolor tła pola wejściowego zostanie zmieniony na niebieski. Pokazaliśmy poniżej i po polu wejściowym poniżej.</p> <p><strong>Zanim</strong></p> <p><strong>Po</strong></p> <p>Wydarzenie Onfocusin</p> <p>Zdarzenie onnfocusin jest takie samo jak zdarzenie OnFocus i dzieje się, gdy element po prostu skupia się na tym, że subtelna różnica między tymi dwoma jest to, że to (onfocusin) bąbelki (onfocusin) i nie można go anulować. Obsługuje wszystkie tagi HTML inne niż , , <br>, , , <iframe>, , , , , i jest zawarty na poziomie DOM 2.</p> <p><strong>Składnia</strong></p> <p>Składnia zdarzenia onfocusin jest następująca.</p> <p>Składnia HTML</p> <element onfocusin="functionName()"> <p>Składnia JavaScript</p> obiekt.onfocusin = function () script; <p>Składnia JavaScript addEventListener ()</p> obiekt.addEventListener („FocusIn”, skrypt); <p>Przykład</p> <!DOCTYPE html><br><html><br><body><br>Nazwa: <br><p>Kliknij pole wejściowe</p><br><script><br>function abFunction() <br>document.getElementById("fname").style.backgroundColor = "pink";<br><br></script><br></body><br></html> <p><strong>Wyjście</strong></p> <p>Przed kliknięciem pola wejściowego.</p> <p>Po kliknięciu pola wejściowego kolor tła pola wejściowego zostanie zmieniony na różowy.</p> <p>wydarzenie Onfocusout</p> <p>Zdarzenie onnfocusout jest takie samo jak zdarzenie Onblur i dzieje się, gdy element po prostu straci skupienie, jednak subtelna różnica między tymi dwoma. Obsługuje wszystkie tagi HTML inne niż , , <br>, , , <iframe>, , , , , i jest zawarty na poziomie DOM 2.</p> <p><strong>Składnia</strong></p> <p>Składnia zdarzenia onfocusout jest następująca.</p> <p><strong>Składnia HTML</strong></p> <element onfocusout="functionName()"> <p>Składnia JavaScript</p> obiekt.onFocusout = function () script; <p>Składnia JavaScript addEventListener ()</p> obiekt.addEventListener („Focusout”, skrypt); <p>Przykład</p> <!DOCTYPE html><br><html><br><body><br>Wpisz swoje imię: <br><p>Pozostaw pole wejściowe, aby przesunąć litery dolnej do wyższej liczby.</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>Wyjście</strong></p> <p>Po opuszczeniu pola wejściowego dolne litery obudowy zostaną przeniesione na litery górne.</p> <p>Wniosek</p> <p>Zdarzenia, które występują, gdy element zyskuje lub traci skupienie, są określane jako koncentracja JavaScript i zdarzenia rozmycia. Wydarzenia, które są sklasyfikowane w kategorii wydarzeń JavaScript Focus i Blur, są wydarzenie Onblur, wydarzenie OnFouc, wydarzenie OnFocusin i OnFocusout Event. Wszystkie te wydarzenia są szczegółowo omówione wraz z odpowiednim przykładem. </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://pl.cyberaxe.org/article/javascript-bitwise-operators">« Operatorzy JavaScript Bitwise</a></li> <li class="prev-next__item prev-next__item--right"><a href="http://pl.cyberaxe.org/article/javascript-form-events">Wydarzenia formularzy 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://pl.cyberaxe.org/category/c-programming">Programowanie C</a> </div> <div class="white-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-find-the-ascii-value-of-a-character-in-c-programming">Jak znaleźć wartość ASCII znaku w programowaniu C?</a> </div> <div class="white-news__text"> W programowaniu C wartość ASCII znaku można znaleźć za pomocą funkcji scanf () lub getchar (). Aby u... </div> <div class="white-news__author"> <a href="http://pl.cyberaxe.org/author/pani-alicja-szafranski">Pani Alicja Szafrański</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://pl.cyberaxe.org/category/golang">Golang</a> </div> <div class="white-news__name"> <a href="http://pl.cyberaxe.org/article/what-is-golang-testing-package">Co to jest pakiet testowy Golang?</a> </div> <div class="white-news__text"> Pakiet testowy Golang zawiera kilka narzędzi i funkcji, które ułatwiają testowanie, debugowanie i po... </div> <div class="white-news__author"> <a href="http://pl.cyberaxe.org/author/pani-alicja-szafranski">Pani Alicja Szafrański</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://pl.cyberaxe.org/category/java">Jawa</a> </div> <div class="white-news__name"> <a href="http://pl.cyberaxe.org/article/java-treemap-examples">Przykłady Java Treemap</a> </div> <div class="white-news__text"> Praktyczny samouczek na temat metod wkładania, usuwania i drukowania elementów Treemapa Java przy uż... </div> <div class="white-news__author"> <a href="http://pl.cyberaxe.org/author/albert-szczesniak">Albert Szcześniak</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://pl.cyberaxe.org/category/python">Pyton</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/pandas-explode-multiple-columns">Pandy eksplodują wiele kolumn</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/makary-stasiak">Makary Stasiak</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/python">Pyton</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/python-write-string-to-file">Python Write String do pliku</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/renata-borowiec">Renata Borowiec</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/python">Pyton</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/python-count-occurrences-in-list">Python Count Występy na liście</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/pani-alicja-szafranski">Pani Alicja Szafrański</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/docker">Doker</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/what-is-the-difference-between-docker-and-podman">Jaka jest różnica między Dockerem a Podmanem?</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/renata-borowiec">Renata Borowiec</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/golang">Golang</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-use-time-now-function-in-golang---examples">Jak używać czasu.Teraz funkcja w Golang - przykłady</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/pani-alicja-szafranski">Pani Alicja Szafrański</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/oracle-linux">Oracle Linux</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/what-are-the-differences-between-oracle-linux-and-ubuntu-linux">Jakie są różnice między Oracle Linux i Ubuntu Linux?</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/renata-borowiec">Renata Borowiec</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/java">Jawa</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/what-is-import-java-io--in-java">Co to jest import Java.io.*; w Javie?</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/justyna-flak">Justyna Flak</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/oracle-database">Baza danych Oracle</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-cache-oracle-sequence-to-improve-data-dictionary-resources">Jak buforować sekwencję Oracle, aby ulepszyć zasoby słownika danych?</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/renata-borowiec">Renata Borowiec</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/salesforce">Siły sprzedaży</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/batch-apex-in-salesforce">Wierzchołek partii w Salesforce</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/oliwia-makowski">Oliwia Makowski</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/php">php</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-use-php-getdate-function">Jak używać funkcji PHP GetDate</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/albert-szczesniak">Albert Szcześniak</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="footer"> <div class="footer__about">Witryna poświęcona systemowi operacyjnemu Linux. Tutaj znajdziesz wiele ciekawych artykułów i przydatnych poradników</div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/python">Pyton</a></li> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/postgresql">PostgreSQL</a></li> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/oracle-linux">Oracle Linux</a></li> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/c">C ++</a></li> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/windows-os">System systemu Windows</a></li> </li> </ul> </div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/docker">Doker</a></li> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/c-sharp">c ostre</a></li> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/r">R</a></li> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/oracle-database">Baza danych Oracle</a></li> </li> <li class="menu-item"><a href="http://pl.cyberaxe.org/all-categories"><b>Wszystkie kategorie</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>