Տեքստային դաշտերի ֆոկուսը JavaScript-ում

Ենթադրենք ունենք ինպուտ: Դուք կարող եք սեղմել այս ինպուտի վրա, և դրանից հետո դրանում կսկսի փայլատակել կուրսորը, և հնարավոր կլինի տեքստ մուտքագրել դրանում:

Այս վիճակի մասին ասում են, որ ինպուտը այս պահին ունի մուտքագրման ֆոկուս: Գործնականում դա նշանակում է, որ եթե սկսեք տեքստ մուտքագրել ստեղնաշարից, ապա այդ տեքստը կհայտնվի այն ինպուտում, որը այժմ ունի մուտքագրման ֆոկուս: Եթե դրանից հետո կտտացնեք ինպուտից դուրս ինչ-որ տեղ, ապա այդ ինպուտը կկորցնի մուտքագրման ֆոկուսը, և դրանում հնարավոր չի լինի տեք스트 մուտքագրել:

Որպեսզի բռնել ինպուտի կողմից ֆոկուսը ստանալու կամ կորցնելու պահը, JavaScript-ում նախատեսված են հատուկ իրադարձություններ: focus իրադարձությունը թույլ է տալիս բռնել ինպուտի կողմից ֆոկուսի ստացումը, իսկ blur իրադարձությունը` կորցնելը: Փորձենք գործնականում: Ենթադրենք ունենք ինպուտ:

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

Ստացենք նրա հղումը փոփոխականում:

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

Իսկ այժմ եկեք անենք այնպես, որ ֆոկուսը ստանալու դեպքում կոնսոլ դուրս բերվի ինպուտի ընթացիկ տեքստը:

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

Տրված է ինպուտ: Ֆոկուսը ստանալու դեպքում գրեք դրանում 1 թիվը, իսկ ֆոկուսը կորցնելու դեպքում` 2 թիվը:

Տրված է ինպուտ: Ենթադրենք դրանում մուտքագրվում է թիվ: Ֆոկուսը կորցնելու դեպքում արտածեք էկրանին այդ թվի քառակուսին:

Տրված է ինպուտ, որում ի սկզբանե կա ինչ-որ տեքստ: Ինպուտի կողմից ֆոկուսը ստանալու դեպքում մաքրեք այդ ինպուտի պարունակությունը: