极客教程JavaScript 不同的方法来实现一个元素失去焦点
当我们在HTML中点击输入元素时，它为输入元素设置了轮廓，聚焦在它身上。有时，当用户从输入元素上失去焦点时，我们必须执行一些JavaScript代码。
例如，当用户使用HTML的 “自动聚焦 “属性刷新网页时，我们可以自动聚焦输入元素。之后，我们可以在一个元素失去焦点时执行JavaScript函数，以确保输入值不是空的。如果输入值是空的，并且元素失去焦点，我们可以显示错误信息，如 “这个字段是必需的”。
在这里，我们将学习不同的方法来实现JavaScript当一个元素失去焦点。
使用onblur事件属性
onblur事件属性是用来触发模糊事件的。当元素失去焦点时，HTML会触发输入元素的模糊事件。
语法
用户可以按照下面的语法，使用onblur事件属性对失去焦点的元素实现JavaScript。
<input type = "text" autofocus onblur = "function_name()">
在上述语法中，function_name是元素失去焦点时要执行的函数名称。
例子
在下面的例子中，我们已经创建了一个文本输入。此外，我们还使用了 “自动聚焦 “属性，在用户刷新网页时聚焦于输入元素。
我们创建了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脚本。我们使用了 “模糊 “和 “失焦 “事件，在用户从元素上移走焦点时执行JavaScript函数。