โฟกัสของฟิลด์ข้อความใน JavaScript

สมมติว่าเรามีอินพุต คุณสามารถคลิก ที่อินพุตนี้และหลังจากนั้นเคอร์เซอร์แบบเส้นตั้ง จะกระพริบและคุณจะสามารถพิมพ์ข้อความเข้าไปได้

เกี่ยวกับสถานะนี้กล่าวกันว่าอินพุตนั้น มีโฟกัสการป้อนข้อมูล ในทางปฏิบัติ หมายความว่าหากเริ่มพิมพ์ข้อความจาก แป้นพิมพ์ ข้อความนั้นจะเข้าสู่ อินพุตที่มีโฟกัสการป้อนข้อมูลในขณะนั้น หากหลังจากนั้นคลิกที่ใดก็ตามนอกอินพุต อินพุตนี้จะสูญเสีย โฟกัสการป้อนข้อมูล และจะไม่สามารถพิมพ์ข้อความเข้าไปได้

เพื่อตรวจจับช่วงเวลาที่อินพุต ได้รับหรือสูญเสียโฟกัส ใน JavaScript มี กิจกรรมพิเศษ: กิจกรรม focus ช่วยให้ตรวจจับการได้รับโฟกัสของอินพุต และกิจกรรม blur - การสูญเสีย ลอง ทดสอบในทางปฏิบัติ สมมติว่าเรามีอินพุต:

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

รับลิงก์ไปยังมันในตัวแปร:

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

และตอนนี้ทำให้เมื่อได้รับ โฟกัส จะพิมพ์ข้อความปัจจุบันของอินพุตไปยังคอนโซล:

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

ให้อินพุตมา เมื่อได้รับโฟกัส ให้เขียน ตัวเลข 1 ลงในมัน และเมื่อสูญเสียโฟกัส - ตัวเลข 2

ให้อินพุตมา ปล่อยให้ป้อนตัวเลขลงในมัน เมื่อ สูญเสียโฟกัส ให้แสดงกำลังสองของ ตัวเลขนั้นบนหน้าจอ

ให้อินพุตมา ซึ่งมีข้อความบางอย่างอยู่ตั้งแต่แรก เมื่อ อินพุตได้รับโฟกัส ให้ล้าง เนื้อหาของอินพุตนี้