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>