เหตุการณ์onchange
ตัวอย่าง
เรียกใช้ JavaScript เมื่อผู้ใช้เปลี่ยนตัวเลือกที่เลือกขององค์ประกอบ <select>:
<select onchange="myFunction()">
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
เหตุการณ์ onchange เกิดขึ้นเมื่อค่าขององค์ประกอบมีการเปลี่ยนแปลง
สำหรับปุ่มตัวเลือกและช่องทำเครื่องหมาย เหตุการณ์ onchange เกิดขึ้นเมื่อสถานะที่เลือกมีการเปลี่ยนแปลง
เคล็ดลับ:เหตุการณ์นี้คล้ายกับ เหตุการณ์oninput ความแตกต่างคือเหตุการณ์ oninput เกิดขึ้นทันทีหลังจากที่ค่าขององค์ประกอบเปลี่ยนไป ในขณะที่ onchange เกิดขึ้นเมื่อองค์ประกอบสูญเสียการโฟกัส หลังจากที่เนื้อหามีการเปลี่ยนแปลง ความแตกต่างอีกประการหนึ่งคือเหตุการณ์ onchange ยังใช้งานได้กับองค์ประกอบ <select>
รองรับเบราว์เซอร์
Event | |||||
---|---|---|---|---|---|
onchange | Yes | Yes | Yes | Yes | Yes |
ไวยากรณ์
ใน HTML:
<element onchange="myScript">
ในจาวาสคริปต์:
object.onchange = function(){myScript};
ใน JavaScript โดยใช้เมธอด addEventListener() :
object.addEventListener("change", myScript);
หมายเหตุ:วิธีการaddEventListener()ไม่ได้รับการสนับสนุนใน Internet Explorer 8 และเวอร์ชันก่อนหน้า
รายละเอียดทางเทคนิค
ฟองอากาศ: | ใช่ |
---|---|
ยกเลิกได้: | ไม่ |
ประเภทเหตุการณ์: | เหตุการณ์ |
แท็ก HTML ที่รองรับ: | <input type="checkbox">, <input type="color">, <input type="date">, <input type="datetime">, <input type="email">, <input type=" file">, <input type="month">, <input type="number">, <input type="password">, <input type="radio">, <input type="range">, < input type="search">, <input type="tel">, <input type="text">, <input type="time">, <input type="url">, <input type="week ">, <select> และ <textarea> |
รุ่น DOM: | กิจกรรมระดับ 2 |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
รัน JavaScript เมื่อผู้ใช้เปลี่ยนเนื้อหาของช่องใส่:
<input type="text"
onchange="myFunction()">