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:

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

Obtengamos una referencia a él en una variable:

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

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

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