ใช้แอตทริบิวต์เหตุการณ์ oninput เพื่อทริกเกอร์เมื่อองค์ประกอบได้รับอินพุตจากผู้ใช้ คุณสามารถลองรันโค้ดต่อไปนี้เพื่อใช้งานแอตทริบิวต์ oninput:
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<p>เขียนชื่อของคุณด้านล่าง:</p>
<input type="text" id="myid" oninput="display()">
<p id="test"></p>
<script>
function display() {
var p = document.getElementById("myid").value;
document.getElementById("test").innerHTML = "คำตอบของคุณคือ " + p;
}
</script>
</body>
</html>
ความแตกต่าง oninput vs onchange:
| เหตุการณ์ | ทำงานเมื่อ |
|---|---|
| oninput | ทุกครั้งที่ค่าเปลี่ยน (พิมพ์, ลบ, วาง, เลือกจาก autocomplete) |
| onchange | เมื่อค่าเปลี่ยน และ องค์ประกอบสูญเสียโฟกัส (blur) |
oninput เหมาะสำหรับ live preview, real-time validation, character counter