event onblur
คำอธิบายและวิธีใช้
event onblur จะเกิดขึ้นเมื่อตัวแปลสูญเสียความเป็นจุดฟิกัส (focus)
event onblur มักถูกใช้ร่วมกับรหัสการตรวจสอบฟอร์ม (เช่น เมื่อผู้ใช้ออกจากช่องรับค่าฟอร์ม)
คำเตือน: event onblur คล้ายกับ เหตุการณ์ onfocusข้างตรงข้าม
คำเตือน: event onblur คล้ายกับ เหตุการณ์ onfocusout。ต่างกันคือ event onblur จะไม่มีการแฟรมโบว์ (bubble) ดังนั้นหากคุณต้องการหาว่า element หรือ element ลูกของมันได้สูญเสียความเป็นจุดฟิกัส (focus) คุณสามารถใช้ event onfocusout แทน แต่คุณสามารถใช้ event onblur ด้วย วิธีการ addEventListener()parameter useCapture (ทางเลือก) ในการทำได้นี้。
ตัวอย่าง
ปฏิบัติ JavaScript ขณะที่ผู้ใช้ออกจากช่องรับค่า:
<input type="text" onblur="myFunction()">
มีตัวอย่าง TIY มากกว่าที่ด้านล่างของหน้า。
รูปแบบ
ใน HTML จะมี:
<element onblur="myScript">
ใน JavaScript จะมี:
object.onblur = function(){}myScript};
ใน JavaScript ใช้วิธี addEventListener()：
object.addEventListener("blur", myScript);
หมายเหตุ：Internet Explorer 8 หรือตัวเวอร์ชั่นต่ำกว่าไม่สนับสนุน วิธีการ addEventListener()。
รายละเอียดเทคนิค
| การลุกลามขึ้นไปข้างหน้า | ไม่สนับสนุน |
|---|---|
| ยกเลิกได้ | ไม่สนับสนุน |
| ชนิดเหตุการณ์： | FocusEvent |
| ป้ายรายชื่อ HTML ที่สนับสนุน： | ทุกส่วนของ HTML อิเลิ่มจาก：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> และ <title> |
| เวอร์ชั่น DOM： | Level 2 Events |
การสนับสนุนโปรแกรมบราวเซอร์
| เหตุการณ์ | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| onblur | สนับสนุน | สนับสนุน | สนับสนุน | สนับสนุน | สนับสนุน |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
ใช้ "onblur" และ "onfocus" ร่วมกัน:
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
ตัวอย่าง
เหตุการณ์ทางการใช้งาน：ตั้งค่าพารามิเตอร์ useCapture ของ addEventListener() ให้เป็น true:
<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>
