onblur 事件

DOM 事件 FocusEvent

定義和用法

onblur 事件發生在對象失去焦點時。

onblur 事件最常與表單驗證代碼一起使用（例如，當用戶離開表單字段時）。

提示： onblur 事件與 onfocus 事件相反。

提示： onblur 事件類似于 onfocusout 事件。主要區別在于 onblur 事件不會冒泡。因此，如果您想找出元素或其子元素是否失去焦點，可以使用 onfocusout 事件。但是，您可以通過使用 onblur 事件的 addEventListener() 方法的 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()">

親自試一試

實例

事件委托：把 addEventListener() 的 useCapture 參數設置為 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>

親自試一試

DOM 事件 FocusEvent