ใช้ addEventListener('input', handler) จับ Event เมื่อค่า Input เปลี่ยน (Real-time)
ตัวอย่าง
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>oninput Event</title>
</head>
<body>
<label> Enter value:</label>
<input id="enterValue" type="text">
<script>
document.getElementById('enterValue').addEventListener("input", function () {
console.log('You entered:', this.value);
});
</script>
</body>
</html>
คำอธิบาย
- Event
inputยิงทุกครั้งที่ค่าเปลี่ยน (พิมพ์, ลบ, Paste, Drag-drop) - ต่างจาก
change: change ยิงตอน Blur/Enter (ไม่ Real-time) - ต่างจาก
keydown/keyup: input จับได้แม้ Paste/Drop - เข้าถึงค่า:
event.target.valueหรือthis.value
ผลลัพธ์
พิมพ์ใน Input → Console Log แสดงค่าทุกครั้งที่เปลี่ยน Real-time
