JavaScript onblur 事件

JavaScript onblur 事件(event)用來監聽元素的失焦情況,失焦的意思指的是失去焦點,瀏覽器是根據網友的滑鼠游標聚焦至其他元素時,認定原本的元素失焦,舉例來說,當網友填寫會員表單中的其中一個欄位,填寫完成後自然就會跳至下一個欄位繼續填寫,無論是使用鍵盤上的 Tab 鍵,還是使用滑鼠將游標移至下一個欄位,原本填寫的那個欄位就算是失焦,若設計師有在原本填寫的那個欄位安插 onblur 事件,就能觸發特定的 JavaScript function 去做一些工作,onblur event 標準寫法是全部用英文小寫,不建議寫成 onBlur。

JavaScript onblur 事件語法

onblur="將觸發的 javascript function"


onblur 可以用在許多網頁元素中,常見的應用如文字輸入欄位 input texttextarea 等,onblur 的工作是"判斷網友是否有產生對某元素產生失焦的動作",當狀況發生時,onblur 必須觸發 JavaScript 的 function 去執行其他程式碼,onblur 的工作就算完成了。

JavaScript onblur 事件範例
<script language="javascript">
function ShowName(){
    alert('您的名子是: '+document.getElementById("MyName").value);
}
</script>
請輸入您的名子:<input type="text" onblur="ShowName()" id="MyName"><br>
請輸入您的興趣:<input type="text">
以上範例輸出
請輸入您的名子:
請輸入您的興趣:
此範例是一個非常簡單的 onblur 應用,在姓名的文字輸入欄位程式碼中,安插了一個 onblur 去監聽當網友填寫完後,游標離開姓名填寫欄位時,就觸發預先準備好的 JavaScript ShowName 函式,將剛剛填寫的姓名 alert 出來,整個範例的運作就是這麼簡單。ShowName 函式中的 alert 是 JavaScript 標準的跳出對話視窗語法,至於如何取得填寫的姓名資料則是使用 DOMdocument.getElementById 方法。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012
PHP Smarty MySQL JQuery Apache W3C