数据结构
网络
关系数据库管理系统 (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+
