HTML DOM 输入搜索 blur() 方法(1)

📌 相关文章

📜 HTML DOM 输入搜索 blur() 方法(1)

📅 最后修改于: 2023-12-03 15:31:10.820000 🧑 作者: Mango

HTML DOM 输入搜索 blur() 方法介绍

简介

blur() 是 HTML DOM 中<input>输入框的方法之一，可以用于取消输入框的焦点。即，当输入框失去焦点时，触发blur()方法。

语法

element.blur();

其中，element 指代需要取消焦点的输入框元素，即使用document.getElementById()等方法获取的元素。

实例

以下是一个简单的 HTML 示例，展示如何使用blur()方法取消输入框的焦点。

<!DOCTYPE html>
<html>
<body>

<form>
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username"><br><br>
  <label for="password">密码:</label>
  <input type="text" id="password" name="password"><br><br>
</form>

<button onclick="blurInput()">取消焦点</button>

<script>
function blurInput() {
  const inputEl = document.getElementById("username");
  inputEl.blur();
}
</script>

</body>
</html>

页面中包含两个输入框，当我们单击“取消焦点”按钮时，blurInput()函数会将焦点从用户名输入框转移到另一个输入框，即取消了输入框的焦点。

总结

blur()方法是 HTML DOM 对输入框处理的一个基本方法之一，可以用于实现一些自定义的操作，例如在按下回车键时自动跳转到下一个输入框。但需要注意的是，当使用该方法时，需要确保输入框具有焦点，否则会报错。