เหตุการณ์onblur
ตัวอย่าง
รัน JavaScript เมื่อผู้ใช้ออกจากฟิลด์อินพุต:
<input type="text" onblur="myFunction()">
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
เหตุการณ์ onblur เกิดขึ้นเมื่อวัตถุสูญเสียโฟกัส
เหตุการณ์ onblur มักใช้กับรหัสตรวจสอบแบบฟอร์ม (เช่น เมื่อผู้ใช้ออกจากฟิลด์แบบฟอร์ม)
เคล็ดลับ:เหตุการณ์ onblur อยู่ตรงข้ามกับ เหตุการณ์onfocus
เคล็ดลับ:เหตุการณ์ onblur คล้ายกับ เหตุการณ์onfocusout ความแตกต่างที่สำคัญคือเหตุการณ์ onblur จะไม่เกิดฟอง ดังนั้น หากคุณต้องการทราบว่าองค์ประกอบหรือองค์ประกอบย่อยสูญเสียโฟกัส คุณสามารถใช้เหตุการณ์ onfocusout อย่างไรก็ตาม คุณสามารถทำสิ่งนี้ได้โดยใช้พารามิเตอร์useCapture ทางเลือกของเมธอด addEventListener() สำหรับเหตุการณ์ onblur
รองรับเบราว์เซอร์
| Event | |||||
|---|---|---|---|---|---|
| onblur | Yes | Yes | Yes | Yes | Yes |
ไวยากรณ์
ใน HTML:
<element onblur="myScript">
ในจาวาสคริปต์:
object.onblur = function(){myScript};
ใน JavaScript โดยใช้เมธอด addEventListener() :
object.addEventListener("blur", myScript);
หมายเหตุ:วิธีการaddEventListener()ไม่ได้รับการสนับสนุนใน Internet Explorer 8 และเวอร์ชันก่อนหน้า
รายละเอียดทางเทคนิค
| ฟองอากาศ: | ไม่ |
|---|---|
| ยกเลิกได้: | ไม่ |
| ประเภทเหตุการณ์: | FocusEvent |
| แท็ก HTML ที่รองรับ: | องค์ประกอบ HTML ทั้งหมด ยกเว้น: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> และ <title> |
| รุ่น DOM: | กิจกรรมระดับ 2 |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
การใช้ "onblur" ร่วมกับเหตุการณ์ "onfocus":
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
ตัวอย่าง
การมอบหมายเหตุการณ์: การตั้งค่าพารามิเตอร์useCapture ของ addEventListener() เป็นจริง:
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focus", myFocusFunction, true);
x.addEventListener("blur", myBlurFunction, true);
function myFocusFunction() {
document.getElementById("myInput").style.backgroundColor = "yellow";
}
function myBlurFunction() {
document.getElementById("myInput").style.backgroundColor = "";
}
</script>
ตัวอย่าง
การมอบหมายกิจกรรม: การใช้เหตุการณ์ focusin (ไม่รองรับโดย Firefox):
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focusin", myFocusFunction);
x.addEventListener("focusout", myBlurFunction);
function myFocusFunction() {
document.getElementById("myInput").style.backgroundColor = "yellow";
}
function myBlurFunction() {
document.getElementById("myInput").style.backgroundColor = "";
}
</script>