Resumo : neste tutorial, você aprenderá sobre os eventos de foco do JavaScript que rastreiam os elementos nos quais os usuários se concentram.
Introdução aos eventos de foco JavaScript
Os focuseventos são acionados quando um elemento recebe ou perde o foco. Estes são os dois principais eventos de foco:
focusdispara quando um elemento recebe foco.blurdispara quando um elemento perde o foco.
O focusine focusoutdispara ao mesmo tempo que focuso e blur, no entanto, eles borbulham enquanto o focuse blurnão.
Os seguintes elementos são focáveis:
- A janela ganha foco quando você a avança usando
Alt+Tabou clicando nela e perde o foco quando você a envia de volta. - Links quando você usa um mouse ou teclado.
- Campos de formulário como texto de entrada quando você usa um teclado ou mouse.
- Elementos com tabindex , também quando você usa um teclado ou mouse.
Exemplos de eventos de foco em JavaScript
O exemplo a seguir mostra como lidar com os eventos focuse blur. Quando você move o foco para o passwordcampo, o plano de fundo muda para yellow. Se você mover o mouse até o usernamecampo, o plano de fundo muda para 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>Linguagem de código: HTML, XML ( xml )Resumo
- Use o
focusevento para lidar com o estado do elemento quando ele tem ou perde o foco.
Anterior
