Текст майдонларининг фокуси JavaScript

Фарз қилайлик, бизда инпут бор. Сиз ушбу инпутни боссангиз, ундан сўнг унда курсор-чўптақ мижий бошлайди ва унга матн киритиш мумкин бўлади.

Бундай ҳолат ҳақида айтиладики, инпут ҳозир киритиш фокусига эга. Амалиётда бу шунни англатадики, агар клавиатурадан матн кирита бошланса, ушбу матн ҳозир киритиш фокусига эга бўлган инпутга түшади. Агар сўнг инпутдан ташқарига босилса, у ҳолда ушбу инпут киритиш фокусини йўқотади ва унга матн кирита олмайсиз.

Инпут томонидан фокус олиш ёки йўқотиш дақиқасини ушлаш учун JavaScript да махсус воқеалар кўзда тутилган: focus воқеаси инпут томонидан фокус олишни ушлашга имкон беради, blur воқеаси эса йўқотишни. Амалиётда синаб кўрамиз. Фарз қилайлик, бизда инпут бор:

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

Унга ҳаволани ўзгарувчига оламиз:

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

Энди эса, фокус олинганида консолга инпутнинг жорий матни чиқарилишини таъминлаймиз:

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

Инпут берилган. Фокус олинганда унга 1 сонни ёзинг, фокус йўқотганда эса - 2 сонни ёзинг.

Инпут берилган. Фарз қилайлик, унга сон киритилсин. Фокус йўқотганда экранга ушбу соннинг квадратини чиқаринг.

Инпут берилган, унда бошланғичда бирор матн бор. Инпут томонидан фокус олинганда ушбу инпутнинг мўзжамини тозаланг.