Фокус текстуалних поља у JavaScript-у

Претпоставимо да имамо инпут. Можете кликнути на овај инпут и након тога у њему ће трептати курсор (трака) и моћи ћете да уносите текст у њега.

О таквом стању се каже да инпут тренутно има фокус уноса. У пракси то значи да ако почнете да уносите текст са тастатуре, тај текст ће се уносити у онај инпут који тренутно има фокус уноса. Ако затим кликнете негде изван инпута, тај инпут изгубиће фокус уноса и у њега се неће моћи уносити текст.

Да би се ухватио тренутак добијања или губитка фокуса од стране инпута, у JavaScript-у постоје посебни догађаји: догађај focus омогућава да се ухвати добијање фокуса инпутом, а догађај blur - губитак. Хајде да испробамо у пракси. Претпоставимо да имамо инпут:

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

Добијмо референцу на њега у променљиву:

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

А сада хајде да подесимо да се при добијању фокуса у конзолу испише тренутни текст инпута:

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

Дат је инпут. При добијању фокуса упишите у њега број 1, а при губитку фокуса - број 2.

Дат је инпут. Нека се у њега уноси број. При губитку фокуса прикажите на екрану квадрат тог броја.

Дат је инпут, у којем је првобитно неки текст. При добијању фокуса инпутом обришите садржај тог инпута.