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

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

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

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

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

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

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

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

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