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

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

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

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

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

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

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

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

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