อีเวนต์ input ใน JavaScript

อีเวนต์ต่อไปที่เราจะศึกษา เรียกว่า input มันจะเกิดขึ้นทุกครั้ง เมื่อมีการป้อนอักขระใหม่ลงใน input หรือ textarea มาดูตัวอย่างกัน สมมติว่า เรามี input:

<input id="elem">

ลองทุกครั้งที่กดปุ่มบนคีย์บอร์ด ให้แสดงเนื้อหาปัจจุบันของ input ในคอนโซล:

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

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

กำหนด input ให้ป้อนข้อความลงไป ทันทีที่ ความยาวข้อความถึง 5 อักขระ ให้แสดงข้อความเกี่ยวกับเรื่องนี้บนหน้าจอ

กำหนด input อนุญาตให้ป้อนได้ 5 อักขระ และกำหนดให้มีย่อหน้าด้วย ระหว่างที่ป้อนอักขระลงใน input ให้แสดงว่า ยังสามารถป้อนอักขระได้อีกกี่ตัว เมื่อจำนวนอักขระ เกินกว่า 5 ตัว ให้แสดงในย่อหน้า ว่าข้อความยาวเกินกี่ตัวอักขระ