событие потери фокуса jQuery

Опубликовано: 17 Декабря, 2021

Событие потери фокуса может происходить в основном с помощью методов focusout () и blur (). Оба они теряют фокус при срабатывании метода. Эти события немного отличаются друг от друга, но все они служат основной цели - потере внимания.
Focusout () часто используется в сочетании с focusin (), а blur () часто используется в сочетании с focus ().

Обратите внимание, что метод focusout () также запускается, когда дочерние элементы теряют фокус.

Синтаксис:

 $ (селектор) .focusout (функция)

или

 $ (селектор) .blur (функция)

Здесь функция - это необязательный параметр, который возникает при срабатывании методов focusout () и blur ().

Пример 1. В этом примере показано использование focusout () для потери фокуса.

 <!DOCTYPE html>
 < html >
 
< head >
    < script src =
 " https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js " >
    </ script >
     
    < script >
        $(document).ready(function () {
            $("div").focusin(function () {
                $(this).css("background-color", "#008000");
            });
            $("div").focusout(function () {
                $(this).css("background-color", "#FFFFFF");
            });
        });
    </ script >
 </ head >
 
< body >
    < h1 style = "color:green;" >
        GeeksforGeeks
    </ h1 >
 
    < div style = "border: 1px dashed green;padding:10px;" >
        Course: < input type = "text" >< br >
    </ div >
 
    < p >
        Clicking outside the input text field enables
        triggering of focusout event.
    </ p >
 </ body >
 
</ html > 

Выход:

Нормальный выход:
При щелчке внутри текстового поля ввода:
При щелчке за пределами текстового поля он возвращается в нормальное состояние:

Пример 2: В этом примере показано использование blur () для потери фокуса.

 <!DOCTYPE html>
 < html >
 
< head >
    < script src =
 " https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js " >
    </ script >
     
    < script >
        $(document).ready(function () {
            $("input").blur(function () {
                alert("Losefocus event occurs");
            });
        });
    </ script >
 </ head >
 
< body >
    < h1 style = "color:Green;" >
        GeeksforGeeks
    </ h1 >
     
    < div style = "border: 1px dashed green;padding:10px;" >
        Course: < input type = "text" >< br >
 
    </ div >
     
    < p >
        Clicking outside the input text field
        enables triggering of blur event.
    </ p >
 </ body >
 
</ html > 

Выход:
Нормальный выход

При щелчке внутри текстового поля ввода
При щелчке за пределами текстового поля отображается это всплывающее окно.

Вопросы о Web технологиях JQuery Picked HTML CSS

событие потери фокуса jQuery

РЕКОМЕНДУЕМЫЕ СТАТЬИ