极客笔记JavaScript在元素失去焦点时的应用
当我们点击HTML中的输入元素时，它会为输入元素设置轮廓，将焦点集中在它上面。有时，当用户从输入元素失去焦点时，我们必须执行一些JavaScript代码。
例如，我们可以使用HTML的”autoFocus”属性，在用户刷新页面时自动聚焦输入元素。然后，我们可以在元素失去焦点时执行JavaScript函数，确保输入值不为空。如果输入值为空并且元素失去焦点，我们可以显示错误信息，如”此字段为必填项”。
在这里，我们将学习不同的方法来实现JavaScript在元素失去焦点时的应用。
使用onblur事件属性
onblur事件属性用于触发失去焦点事件。当元素失去焦点时，HTML会触发输入元素的失去焦点事件。
语法
用户可以按照以下语法使用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函数。