Enfoque de campos de texto en JavaScript

Supongamos que tenemos un input. Puedes hacer clic en este input y después de eso en él parpadeará el cursor y podrás introducir texto en él.

Sobre este estado se dice que el input tiene el foco de entrada. En la práctica esto significa que si se comienza a introducir texto con el teclado, este texto llegará a aquel input que tenga actualmente el foco de entrada. Si luego se hace clic en algún lugar fuera del input, este input perderá el foco de entrada y no se podrá introducir texto en él.

Para capturar el momento de obtención o pérdida del foco por parte del input, en JavaScript se previenen eventos especiales: el evento focus permite capturar la obtención del foco por parte del input, y el evento blur - la pérdida. Probemos en la práctica. Supongamos que tenemos un input:

<input id="elem" value="text">

Obtengamos una referencia a él en una variable:

let elem = document.querySelector('#elem');

Y ahora hagamos que al obtener el foco se muestre en la consola el texto actual del input:

elem.addEventListener('focus', function() {
	console.log(elem.value);
});

Dado un input. Al obtener el foco escriba en él el número 1, y al perder el foco - el número 2.

Dado un input. Supongamos que en él se introduce un número. Al perder el foco muestre en pantalla el cuadrado de este número.

Dado un input, en el cual inicialmente hay algún texto. Al obtener el foco el input, limpie el contenido de este input.