В этом руководстве вы узнаете о событиях фокуса в JavaScript, которые отслеживают элементы, на которых фокусируются пользователи.
События focus — это когда элемент получает или теряет фокус. Это два основных события:
focusсрабатывает, когда элемент получает фокус.blurсрабатывает, когда элемент теряет фокус.
focusin и focusout срабатывают одновременно с focus и blur, однако они раздуваются.
Фокусируются следующие элементы:
- Окно получает фокус, когда вы перемещаете его вперед, используя
Alt+Tabили щелкая по нему, и теряет фокус, когда вы отправляете его обратно. - Ссылки при использовании мыши или клавиатуры.
- Поля формы, такие как ввод текста, когда вы используете клавиатуру или мышь.
- Элементы с tabindex, даже когда вы используете клавиатуру или мышь.
Примеры фокусных событий
В следующем примере показано, как обрабатывать focus и blur. Когда вы перемещаете фокус на поле password, фон меняется на yellow. Если вы переместите мышь в поле username, фон изменится на white.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Focus Events</title>
</head>
<body>
<p>Move focus to the password field to see the effect:</p>
<form id="form">
<input type="text" placeholder="username">
<input type="password" placeholder="password">
</form>
<script>
const pwd = document.querySelector('input[type="password"]');
pwd.addEventListener('focus',(e) => {
e.target.style.backgroundColor = 'yellow';
});
pwd.addEventListener('blur',(e) => {
e.target.style.backgroundColor = '';
});
</script>
</body>
</html>