資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學實現元素失去焦點時的JavaScript程式碼
當我們點選HTML中的輸入元素時，它會為輸入元素設定輪廓，並使其獲得焦點。有時，我們需要在使用者失去輸入元素焦點時執行一些JavaScript程式碼。
例如，我們可以使用HTML的‘autoFocus’屬性在使用者重新整理網頁時自動聚焦輸入元素。之後，當元素失去焦點時，我們可以執行JavaScript函式來確保輸入值不為空。如果輸入值為空，並且元素失去焦點，我們可以顯示錯誤訊息，例如“此欄位必填”。
在這裡，我們將學習在元素失去焦點時實現JavaScript的不同方法。
使用onblur事件屬性
onblur事件屬性用於觸發blur事件。當元素失去焦點時，HTML會觸發輸入元素的blur事件。
語法
使用者可以按照以下語法使用onblur事件屬性來實現元素失去焦點時的JavaScript程式碼。
<input type = "text" autofocus onblur = "function_name()">
在上例語法中，function_name是要在元素失去焦點時執行的函式名稱。
示例
在下面的示例中，我們建立了一個文字輸入框。我們還使用了‘autoFocus’屬性，以便在使用者重新整理網頁時將焦點放在輸入元素上。
我們建立了executeJS()函式，該函式列印類似於“函式已執行”的訊息。我們使用了onblur事件屬性來呼叫executeJS()函式。因此，每當輸入失去焦點時，它都會呼叫executeJS()函式，使用者可以在輸出中觀察到這一點。
<html>
<body>
<h3> Using the <i> onblur event </i> to execute JavaScript code when element loses the focus </h3>
<p> First click inside the input element and then click outsite the input element</p>
<input type = "text" autofocus onblur = "executeJS()">
<div id = "content"></div>
<script>
let content = document.getElementById('content');
function executeJS() {
content.innerHTML = "executeJS() function executed after input element lose the focus."
}
</script>
</body>
</html>
使用onfocusout事件屬性
‘onfocusout’事件屬性的工作方式與‘onblur’事件屬性相同。當‘focusout’事件觸發時，‘onfocusout’事件屬性將執行JavaScript指令碼。
語法
使用者可以按照以下語法使用‘onfocusout’事件屬性來實現輸入元素失去焦點時的JavaScript程式碼。
<input type = "text" onfocusout = "func1()" onfocus = "func2()">
在上例語法中，當我們將焦點放在輸入元素上時，它將執行func2()函式，當元素失去焦點時，它將執行func1()函式。
示例
在下面的示例中，我們添加了‘onfocus’和‘onfocusout’事件屬性，以便在使用者聚焦和取消聚焦元素時執行不同的函式。當用戶將焦點放在輸入元素上時，我們呼叫focusFunc()函式，當用戶從輸入元素中移除焦點時，我們呼叫executeFunc()函式。
<html>
<body>
<h3> Using the <i> onfocusout event </i> to execute JavaScript code when element loses the focus </h3>
<input type = "text" autofocus onfocusout = "executeFunc()" onfocus = "focusFunc()" placeholder = "Click outside to remove focus">
<div id = "content"></div>
<script>
let content = document.getElementById('content');
function executeFunc() {
content.innerHTML = "executeFunc() function executed after input element loses the focus.";
}
function focusFunc() {
content.innerHTML = "Element is focused currently.";
}
</script>
</body>
</html>
示例
在下面的示例中，我們使用了addEventListner()方法來檢測輸入元素上的事件。我們使用id訪問輸入元素，並添加了‘focus’和‘focusout’事件。當用戶將焦點放在輸入元素上時，HTML將觸發‘focus’事件並執行focusFunc()函式。當用戶從輸入元素中移除焦點時，它將觸發‘focusout’事件並執行printMessage()函式。
<html>
<body>
<p>Using the <i> focusout event with addEventListner() method </i> to execute JavaScript code when element loses the focus </p>
<input id = "inp" type = "text" autofocus placeholder = "Click outside to remove focus">
<div id = "content"></div>
<script>
let content = document.getElementById('content');
let input = document.getElementById('inp');
input.addEventListener('focusout', printMessage);
input.addEventListener('focus', focusFunc);
// code to execute after the element loses the focus
function printMessage() {
content.innerHTML = "Function executed after element loses the focus";
}
// function to execute when an element is focused.
function focusFunc() {
content.innerHTML = "Element is focused right now.";
}
</script>
</body>
</html>
在本教程中，我們學習瞭如何在元素失去焦點時實現JavaScript指令碼。我們使用了‘blur’和‘focusout’事件來在使用者從元素中移除焦點時執行JavaScript函式。
瀏覽量：1K+
