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

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

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

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

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

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

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

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

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