Фокус на текст полиња во JavaScript

Нека имаме input. Можете да кликнете на овој input и после тоа во него ќе трепка курсор-стапче и ќе може да внесувате текст во него.

За таква состојба се вели дека input-от во моментов има фокус на внесување. Во пракса ова значи дека ако започнете да внесувате текст со тастатурата, тој текст ќе стигнува до тој input кој во моментов има фокус на внесување. Ако потоа кликнете некаде надвор од input-от, тој input ќе го изгуби фокусот на внесување и во него нема да може да се внесува текст.

За да го фатите моментот на добивање или губење на фокусот од input-от, во JavaScript се предвидени посебни настани: настанот focus омитува да го фати добивањето на фокусот од input-от, а настанот blur - губењето. Ајде да пробаме во пракса. Нека имаме input:

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

Ќе добиеме референца до него во променлива:

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

А сега да направиме така што при добивање на фокус во конзолата да се испечати тековниот текст на input-от:

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

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

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

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