onblur 事件
描述
onblur 事件在 HTML 元素失去焦點時發生。
onblur 事件常用於輸入欄位。
onblur 事件常與表單驗證一起使用（當用戶離開表單欄位時）。
語法
技術詳情
| 冒泡 | 否 |
|---|---|
| 可取消 | 否 |
| 事件型別 | FocusEvent |
| HTML 標籤 | 所有 HTML 元素，除了：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> 和 <title> |
| DOM 版本 | 二級事件 |
更多示例
示例
使用 onfocus 和 onblur 屬性
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
自己動手試一試 »
示例
事件委託：使用 focus 和 blur 事件
將 addEventListener() 的 useCapture 引數設定為 true
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
let 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 和 focusout 事件
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
let 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>
自己動手試一試 »
瀏覽器支援
onblur 是 DOM Level 2 (2001) 的一個特性。
所有瀏覽器都完全支援。
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
