เหตุการณ์oninput
ตัวอย่าง
รัน JavaScript เมื่อผู้ใช้เขียนบางสิ่งในฟิลด์ <input>:
<input type="text" oninput="myFunction()">
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
เหตุการณ์ oninput เกิดขึ้นเมื่อองค์ประกอบได้รับการป้อนข้อมูลของผู้ใช้
เหตุการณ์นี้เกิดขึ้นเมื่อค่าขององค์ประกอบ <input> หรือ <textarea> เปลี่ยนไป
เคล็ดลับ:เหตุการณ์นี้คล้ายกับ เหตุการณ์onchange ความแตกต่างคือเหตุการณ์ oninput เกิดขึ้นทันทีหลังจากที่ค่าขององค์ประกอบเปลี่ยนไป ในขณะที่ onchange เกิดขึ้นเมื่อองค์ประกอบสูญเสียการโฟกัส หลังจากที่เนื้อหามีการเปลี่ยนแปลง ความแตกต่างอีกประการหนึ่งคือเหตุการณ์ onchange ยังใช้งานได้กับองค์ประกอบ <select>
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่รองรับเหตุการณ์อย่างสมบูรณ์
Event | |||||
---|---|---|---|---|---|
oninput | Yes | 9.0 | 4.0 | 5.0 | Yes |
ไวยากรณ์
ใน HTML:
<element oninput="myScript">
ในจาวาสคริปต์:
object.oninput = function(){myScript};
ใน JavaScript โดยใช้เมธอด addEventListener() :
object.addEventListener("input", myScript);
หมายเหตุ:วิธีการaddEventListener()ไม่ได้รับการสนับสนุนใน Internet Explorer 8 และเวอร์ชันก่อนหน้า
รายละเอียดทางเทคนิค
ฟองอากาศ: | ใช่ |
---|---|
ยกเลิกได้: | ไม่ |
ประเภทเหตุการณ์: | เหตุการณ์ , InputEvent |
แท็ก HTML ที่รองรับ: | <input type="color">, <input type="date">, <input type="datetime">, <input type="email">, <input type="เดือน">, <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"> and <textarea> |
รุ่น DOM: | กิจกรรมระดับ 3 |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
ตัวเลื่อนช่วง - วิธีอัปเดตค่าตัวเลื่อนแบบไดนามิก:
<input type="range" oninput="myFunction(this.value)">