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/golang">Golang</a> </div> <div class="white-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-trim-a-string-in-golang">Jak przyciąć sznur w Golang</a> </div> <div class="white-news__text"> Przycinanie strun to proces usuwania dodatkowych przestrzeni lub znaków od początku lub końca sznurk... </div> <div class="white-news__author"> <a href="http://pl.cyberaxe.org/author/zofia-gora">Zofia Góra</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://pl.cyberaxe.org/category/c">C ++</a> </div> <div class="white-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-find-the-size-of-a-string-in-c">Jak znaleźć rozmiar sznurka w C++?</a> </div> <div class="white-news__text"> Aby znaleźć rozmiar łańcucha w C ++, możesz użyć funkcji size (), długości () i strlen (), takich ja... </div> <div class="white-news__author"> <a href="http://pl.cyberaxe.org/author/makary-stasiak">Makary Stasiak</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://pl.cyberaxe.org/category/c-sharp">c ostre</a> </div> <div class="white-news__name"> <a href="http://pl.cyberaxe.org/article/what-are-constant-variables-in-c">Jakie są stałe zmienne w C#</a> </div> <div class="white-news__text"> Zmienna stała to rodzaj zmiennej, której wartość jest ustawiana podczas jej definicji i nie można je... </div> <div class="white-news__author"> <a href="http://pl.cyberaxe.org/author/larysa-witczak">Larysa Witczak</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/seaborn-horizontal-bar-plot">Seborn poziome działki barowe</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/larysa-witczak">Larysa Witczak</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/salesforce-data-loader">Salesforce Data Loader</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/larysa-witczak">Larysa Witczak</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-arrayreverse-function-in-php">Jak używać funkcji Array_Reverse w PHP</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/html">html</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-use-css-flex-grow-property">Jak korzystać z właściwości CSS Flex-Rośl?</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/bertram-jozwiak">Bertram Jóźwiak</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-serialize-function">Jak korzystać z funkcji serializacji PHP</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/aws">AWS</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/what-is-aws-control-tower-and-how-to-use-it">Co to jest wieża kontrolna AWS i jak z niej korzystać?</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/maja-kucharski">Maja Kucharski</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/docker">Doker</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-login-into-docker-via-command-prompt">Jak zalogować się do Dockera za pomocą wiersza polecenia?</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/zofia-gora">Zofia Góra</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-append-to-an-array-in-php">Jak dołączyć do tablicy PHP?</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/c-sharp">c ostre</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-use-long-keyword-in-c">Jak używać długiego słowa kluczowego w C#</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> <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>