ตัวอย่าง
รัน JavaScript เมื่อช่องใส่เป็นเรื่องเกี่ยวกับการสูญเสียความสำคัญ:
<input type="text"
onfocusout="myFunction()"> ลองตัวเอง» เพิ่มเติม "Try it Yourself" ตัวอย่างด้านล่าง
ความหมายและการใช้งาน
เหตุการณ์ที่เกิดขึ้นเมื่อ onfocusout องค์ประกอบที่เกี่ยวกับการสูญเสียความสำคัญ
เคล็ดลับ: เหตุการณ์ onfocusout คล้ายกับ onblur เหตุการณ์ ความแตกต่างที่สำคัญคือเหตุการณ์ onblur ไม่ฟอง ดังนั้นถ้าคุณต้องการที่จะหาว่าองค์ประกอบหรือบุตรหลานของตนสูญเสียโฟกัสคุณควรใช้เหตุการณ์ onfocusout
เคล็ดลับ: แม้ว่า Firefox ไม่สนับสนุนเหตุการณ์ onfocusout คุณสามารถหาว่าเป็นเด็กขององค์ประกอบสูญเสียโฟกัสหรือไม่โดยใช้เป็นผู้ฟังที่จับสำหรับ onblur เหตุการณ์ (โดยใช้พารามิเตอร์ useCapture เสริมของ addEventListener() วิธีการ)
Tip: เหตุการณ์ onfocusout อยู่ฝั่งตรงข้ามของ onfocusin เหตุการณ์
สนับสนุนเบราว์เซอร์
| เหตุการณ์ | |||||
|---|---|---|---|---|---|
| onfocusout | ใช่ | ใช่ | ได้รับการสนับสนุน | ใช่ | ใช่ |
หมายเหตุ: เหตุการณ์ onfocusout อาจไม่ทำงานตามที่คาดไว้ใน Chrome, Safari และ Opera 15+ โดยใช้ไวยากรณ์ JavaScript HTML DOM แต่ก็ควรจะทำงานเป็นแอตทริบิวต์ HTML และโดยใช้ addEventListener() วิธีการ
วากยสัมพันธ์
ใน HTML:
ใน JavaScript (may not work as expected in Chrome, Safari and Opera 15+) :
object .onfocusout=function(){ ลองตัวเอง» ใน JavaScript โดยใช้ addEventListener() วิธีการ:
object .addEventListener("focusout", myScript );
ลองตัวเอง» หมายเหตุ: addEventListener() วิธีการที่ไม่ได้รับการสนับสนุนใน Internet Explorer 8 และรุ่นก่อนหน้านี้
รายละเอียดทางเทคนิค
| บับเบิ้ล: | ใช่ |
|---|---|
| ยกเลิก: | ไม่ |
| ประเภทเหตุการณ์: | FocusEvent |
| แท็ก HTML ที่รองรับ: | องค์ประกอบ HTML ทั้งหมดยกเว้น: <ฐาน> <BDO> ฟรี <head> <html> <iframe> <meta> <พารามิเตอร์> <script> <style> และ <title> |
| DOM เวอร์ชัน: | ระดับที่ 2 เหตุการณ์ |
ตัวอย่างอื่น ๆ
ตัวอย่าง
ใช้ "onfocusin" ร่วมกับ "onfocusout" เหตุการณ์:
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
ลองตัวเอง» ตัวอย่าง
คณะผู้แทนของเหตุการณ์: การตั้งค่าพารามิเตอร์ของ useCapture addEventListener() จริง (for focus and blur) :
<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>
ลองตัวเอง» <object เหตุการณ์