ტექსტური ველების ფოკუსი JavaScript-ში

დავუშვათ, გვაქვს ინფუთი. თქვენ შეგიძლიათ დააწკაპუნოთ ამ ინფუთზე და ამის შემდეგ მასში გამოჩნდება მოციმციმე კურსორი და მასში ტექსტის შეყვანა შესაძლებელი იქნება.

ამ მდგომარეობაზე ამბობენ, რომ ინფუთს ამჟამად აქვს შეყვანის ფოკუსი. პრაქტიკაში ეს ნიშნავს, რომ თუ კლავიატურიდან ტექსტის შეყვანა დაიწყება, მაშინ ეს ტექსტი მოხვდება იმ ინფუთში, რომელსაც ამჟამად აქვს შეყვანის ფოკუსი. თუ შემდეგ ინფუთის გარეთ სადმე დააწკაპუნებენ, მაშინ ეს ინფუთი დაკარგავს შეყვანის ფოკუსს და მასში ტექსტის შეყვანა ვეღარ იქნება შესაძლებელი.

იმ მომენტის დასაჭერად, როდესაც ინფუთი იღებს ან კარგავს ფოკუსს, JavaScript-ში გათვალისწინებულია სპეციალური მოვლენები: მოვლენა focus საშუალებას აძლევს დავიჭიროთ ფოკუსის მიღება ინფუთის მიერ, ხოლო მოვლენა blur - ფოკუსის დაკარგვა. ვცადოთ პრაქტიკაში. დავუშვათ, გვაქვს ინფუთი:

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

მივიღოთ მისი მითითება ცვლადში:

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

ახლა კი გავაკეთოთ ისე, რომ ფოკუსის მიღებისას კონსოლში გამოჩნდეს ინფუთის მიმდინარე ტექსტი:

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

მოცემულია ინფუთი. ფოკუსის მიღებისას ჩაწერეთ მასში რიცხვი 1, ხოლო ფოკუსის დაკარგვისას - რიცხვი 2.

მოცემულია ინფუთი. დავუშვათ, მასში შედის რიცხვი. ფოკუსის დაკარგვისას გამოიტანეთ ეკრანზე ამ რიცხვის კვადრატი.

მოცემულია ინფუთი, რომელშიც თავდაპირველად არის რაღაც ტექსტი. ინფუთის მიერ ფოკუსის მიღებისას გაასუფთავეთ ამ ინფუთის შიგთავსი.