เหตุการณ์ oninput

เหตุการณ์ DOM InputEvent

คำนิยามและวิธีใช้

เหตุการณ์ oninput มีขึ้นเมื่อองค์ประกอบได้รับการใส่ข้อมูลจากผู้ใช้

เหตุการณ์นี้เกิดขึ้นเมื่อค่าของ <input> หรือ <textarea> มีการเปลี่ยนแปลง

คำแนะนำ:เหตุการณ์นี้คล้ายกับ เหตุการณ์ onchange。ความแตกต่างคือ oninput ติดต่อเหตุเมื่อค่าขององค์ประกอบเปลี่ยนแปลงทันที และ onchange ติดต่อเหตุเมื่อองค์ประกอบเสร็จภาพและมีการเปลี่ยนแปลง แนวทางอื่นคือ onchange มีผลกระทบกับองค์ประกอบ <select> ด้วย

ตัวอย่าง

ตัวอย่าง 1

เมื่อผู้ใช้เขียนข้อความในช่อง <input>:

<input type="text" oninput="myFunction()">

ลองเองด้วยเชิง

ตัวอย่าง 2

สลิกช่องวิเคราะห์ - แนวทางในการปรับปรุงค่าสลิกเป็นไปด้วยตัวเลข:

<input type="range" oninput="myFunction(this.value)">

ลองเองด้วยเชิง

รูปแบบ

ใน HTML:

<element oninput="myScript">

ลองเองด้วยเชิง

ใน JavaScript:

object.oninput = function(){myScript};

ลองเองด้วยเชิง

ใน JavaScript ใช้วิธี addEventListener():

object.addEventListener("input", myScript);

ลองเองด้วยเชิง

หมายเหตุ:Internet Explorer 8 หรือตัวรุ่นเก่ากว่าไม่สนับสนุน วิธีการ addEventListener()。

รายละเอียดเทคนิค

การแพร่ของเหตุ: สนับสนุน
สามารถยกเลิกได้: ไม่สนับสนุน
ประเภทหาตัว: Event, InputEvent
HTML แทรกที่สนับสนุน: <input type="color">, <input type="date">, <input type="datetime">, <input type="email">, <input type="month">, <input type="number">, <input type="password">, <input type="range">, <input type="search">, <input type="tel">, <input type="text">, <input type="time">, <input type="url">, <input type="week"> และ <textarea>
DOM รุ่น: Level 3 Events

การสนับสนุนโปรแกรมบราวเซอร์

ตัวเลขในตารางระบุแบรร์แรกที่สนับสนุนเหตุการณ์นี้ทั้งหมด

เหตุการณ์ Chrome IE Firefox Safari Opera
oninput สนับสนุน 9.0 4.0 5.0 สนับสนุน
เหตุการณ์ DOM InputEvent