Foco de campos de texto em JavaScript
Suponha que temos um campo de entrada. Você pode clicar nesse campo e depois disso um cursor piscante aparecerá e será possível inserir texto nele.
Diz-se que o campo de entrada está com foco de entrada. Na prática, isso significa que, se você começar a digitar texto no teclado, esse texto será inserido no campo de entrada que está atualmente com foco. Se, em seguida, você clicar em algum lugar fora do campo, ele perderá o foco de entrada e não será mais possível digitar texto nele.
Para capturar o momento em que um campo de entrada
ganha ou perde o foco, o JavaScript fornece
eventos especiais: o evento focus
permite capturar quando o campo ganha foco,
e o evento blur - quando perde. Vamos tentar
na prática. Suponha que temos um campo de entrada:
<input id="elem" value="text">
Vamos obter uma referência para ele em uma variável:
let elem = document.querySelector('#elem');
E agora vamos fazer com que, ao receber o foco, o texto atual do campo seja exibido no console:
elem.addEventListener('focus', function() {
console.log(elem.value);
});
Dado um campo de entrada. Ao receber o foco, escreva nele
o número 1, e ao perder o foco -
o número 2.
Dado um campo de entrada. Suponha que um número seja inserido nele. Ao perder o foco, exiba na tela o quadrado desse número.
Dado um campo de entrada que inicialmente tem algum texto. Ao receber o foco, limpe o conteúdo desse campo.
