События jQuery: установить цвет фона элемента, когда элемент получает фокус или теряет фокус

Последнее обновление 21 сентября 2018 11:13:51 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

События jQuery: упражнение - 20 с решением

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

HTML код:

 <Тело>
 <DIV>
 Имя: <input type = "text"> <br>
  Фамилия: <input type = "text">
  </ DIV>
  </ Body>

Код CSS для сфокусированного цвета:

 <Стиль>
  .focusedin {
     фон: зеленый;
	   }
  .focusedout {
     фон: синий;
	   }
</ Стиль>

Решение :

HTML-код:

<!DOCTYPE html>
<html>
<head>
   <style>
  .focusedin {
    background: green;
  }
  .focusedout {
    background: blue;
  }
  </style>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>Set background color of an element when the element gets focus or loses focus</title>
</head>
<body>
 <div>
 First name: <input type="text"><br>
 Last name: <input type="text">
</div>
</body>
</html>

Код JavaScript:


$("div").focusin(function(){
        $(this).attr('class', 'focusedin');
    });
 $("div").focusout(function(){
        $(this).attr('class', 'focusedout');
    });

Демонстрация в реальном времени:

См. Pen jquery-events-упражнение-20 от w3resource ( @ w3resource ) в CodePen .

Внесите свой код и комментарии через Disqus.

Предыдущий: Проверить, имеет ли фокус ввод?
Далее: отобразить имя тега выбранного элемента.