onfocusoutเหตุการณ์
ตัวอย่าง
เรียกใช้ JavaScript เมื่อช่องใส่กำลังจะสูญเสียโฟกัส:
<input type="text"
onfocusout="myFunction()">
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
เหตุการณ์ onfocusout เกิดขึ้นเมื่อองค์ประกอบกำลังจะสูญเสียโฟกัส
เคล็ดลับ:เหตุการณ์ onfocusout คล้ายกับ เหตุการณ์onblur ความแตกต่างที่สำคัญคือเหตุการณ์ onblur จะไม่เกิดฟอง ดังนั้น หากคุณต้องการทราบว่าองค์ประกอบหรือองค์ประกอบย่อยสูญเสียการโฟกัส คุณควรใช้เหตุการณ์ onfocusout
เคล็ดลับ:เหตุการณ์ onfocusout อยู่ตรงข้ามกับ เหตุการณ์onfocusin
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่รองรับเหตุการณ์อย่างสมบูรณ์
| Event | |||||
|---|---|---|---|---|---|
| onfocusout | Yes | Yes | 52.0 | Yes | Yes |
หมายเหตุ:เหตุการณ์ onfocusout อาจไม่ทำงานตามที่คาดไว้ใน Chrome, Safari และ Opera 15+ โดยใช้ไวยากรณ์ JavaScript HTML DOM อย่างไรก็ตาม ควรทำงานเป็นแอตทริบิวต์ HTML และโดยใช้เมธอด addEventListener() (ดูตัวอย่างไวยากรณ์ด้านล่าง)
ไวยากรณ์
ใน HTML:
<element onfocusout="myScript">
ใน JavaScript (อาจไม่ทำงานตามที่คาดไว้ใน Chrome, Safari และ Opera 15+):
object.onfocusout = function(){myScript};
ใน JavaScript โดยใช้เมธอด addEventListener() :
object.addEventListener("focusout", myScript);
หมายเหตุ:วิธีการaddEventListener()ไม่ได้รับการสนับสนุนใน Internet Explorer 8 และเวอร์ชันก่อนหน้า
รายละเอียดทางเทคนิค
| ฟองอากาศ: | ใช่ |
|---|---|
| ยกเลิกได้: | ไม่ |
| ประเภทเหตุการณ์: | FocusEvent |
| แท็ก HTML ที่รองรับ: | องค์ประกอบ HTML ทั้งหมด ยกเว้น: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> และ <title> |
| รุ่น DOM: | กิจกรรมระดับ 2 |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
การใช้ "onfocusin" ร่วมกับเหตุการณ์ "onfocusout":
<input type="text" onfocusin="focusFunction()" onfocusout="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:
<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>