События jQuery: проверка, имеет ли фокус ввода

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

script1adsense2code

script1adsense3code

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

Проверить, есть ли у входа фокус?

HTML код:

 <Тело>
<div id = "content">
<input tabIndex = "1">
<select tabIndex = "3">
    <опция> выбрать меню </ опция>
	</ Выберите>
	 <p tabIndex = "3">
	 Параграф
	 </ DIV>
   </ DIV>
 </ Body>

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

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

Решение :

HTML-код:

<!DOCTYPE html>
<html>
<head>
   <style>
  .focused {
    background: green;
  }
  </style>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>Test if an input has focus</title>
</head>
<body>
<div id="content">
  <input tabIndex="1">
  <select tabIndex="3">
    <option>select menu</option>
  </select>
  <p tabIndex="3">
    A Paragraph
  </div>
</div>
</body>
</html>

Код JavaScript:


$( "#content" ).delegate( "*", "focus blur", function() {
  var elem = $( this );
  setTimeout(function() {
    elem.toggleClass( "focused", elem.is( ":focus" ) );
  }, 0 );
});

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

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

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

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