HTML - DOM blur() 方法

HTML DOM 的 blur() 方法用于动态地从 HTML DOM 中的元素中移除键盘焦点。从元素中移除焦点是指将键盘焦点从特定元素（例如输入字段或按钮）移开。

DOM 提供了另一种名为 focus() 的方法，您可以使用它来在 HTML DOM 中的任何元素上设置焦点。

语法

以下是 HTML DOM blur() 方法的语法：

Object.blur();

参数

此方法不接受任何参数。

返回值

此方法不返回值。

示例 1：从输入字段中移除焦点

以下是 HTML DOM blur() 方法的基本示例，用于在单击按钮时从输入字段中移除焦点：

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM blur()</title>
</head>
<body>
<p>Click the button to blur the input field.</p>  
<input type="text" id="myInput" placeholder="Type something...">
<button onclick="blurInput()">Blur Input</button>
<script>
   function blurInput() {
      const input = document.getElementById('myInput');
      input.blur();
   }
</script>
</body>
</html>

示例 2：在锚点 (<a>) 元素上使用 blur() 方法

以下是 HTML DOM blur() 方法的另一个示例。我们使用此方法从锚点 (<a>) 元素中移除焦点：

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM blur()</title>
</head>
<body> 
<p>Click the button to blur the anchor element.</p>
<a id="myAnchor" href="https://www.example.com">Example Anchor</a>
<button onclick="blurAnchor()">Blur Anchor Element</button>
<script>
   function blurAnchor() {
      const myAnchor = document.getElementById('myAnchor');
      myAnchor.blur();
      alert('Anchor element blurred!');
   }
</script>
</body>
</html>

示例 3：单击任何位置时模糊

下面的示例演示了 blur() 方法如何与事件监听器一起使用。当您单击输入字段并在字段外部单击时，将弹出一个带有“输入字段已模糊”消息的弹出窗口：

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM blur()</title>
</head>
<body>
    <p>Click anywhere outside the input field to blur it.</p>
    <input type="text" id="myInput" value="Edit Me!">

    <script>
        const myInput =document.getElementById('myInput');
        myInput.addEventListener('blur', () => {
            alert('Input field blurred!'); 
        });
    </script>
</body>
</html>

支持的浏览器

方法
blur()	是	是	是	是	是

html_dom_element_reference.htm

打印页面

上一个

下一个