JavaScript的聚焦：focus/blur

🧑‍🎓 个人主页：《爱蹦跶的大A阿》

🔥当前正在更新专栏：《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》

​ 

​

​

✨ 正文

一、简介

focus 和 blur 事件是 HTML 元素的重要事件，用于检测元素是否获得或失去焦点。

二、focus 事件

当用户将焦点移动到元素上时，会触发 focus 事件。

代码示例

<input type="text" id="name" onfocus="alert('获得焦点')">

三、blur 事件

当用户将焦点移出元素时，会触发 blur 事件。

代码示例

<input type="text" id="name" onblur="alert('失去焦点')">

四、事件处理程序

可以使用 addEventListener() 方法为元素添加 focus 和 blur 事件处理程序。

代码示例

document.getElementById("name").addEventListener("focus", function() {
  alert("获得焦点");
});

document.getElementById("name").addEventListener("blur", function() {
  alert("失去焦点");
});

五、阻止事件传播

可以使用 stopPropagation() 方法阻止事件传播。

代码示例

document.getElementById("name").addEventListener("focus", function(event) {
  event.stopPropagation();
  alert("获得焦点");
});

相关属性

• tabIndex：用于指定元素的焦点顺序。
• autofocus：用于指定元素是否自动获得焦点。

更多信息

• HTML Focus Event: FocusEvent - Web APIs | MDN: FocusEvent - Web APIs | MDN
• HTML Blur Event: <移除了无效网址>: <移除了无效网址>

六、代码示例

使用 focus 和 blur 事件来验证表单输入

<form action="/action_page.php">
  <input type="text" name="name" id="name" onfocus="validateName()" onblur="validateName()">
  <input type="submit" value="Submit">
</form>

<script>
function validateName() {
  var name = document.getElementById("name").value;

  if (name === "") {
    alert("Please enter your name");
    return false;
  }

  return true;
}
</script>

使用 focus 和 blur 事件来控制元素的可见性

<div id="message">
  Please enter your name.
</div>

<input type="text" id="name" onfocus="hideMessage()" onblur="showMessage()">

<script>
function hideMessage() {
  document.getElementById("message").style.display = "none";
}

function showMessage() {
  document.getElementById("message").style.display = "block";
}
</script>

✨ 结语

        focus 和 blur 事件是用于检测元素是否获得或失去焦点的重要事件。它们可以用于各种目的，例如验证表单输入、控制元素的可见性等等。

希望本文对你有所帮助！

以下是一些额外的建议：

• 阅读 HTML 和 JavaScript 文档，以了解更多关于 focus 和 blur 事件的信息。
• 练习使用 focus 和 blur 事件来实现不同的功能。
• 在实际项目中使用 focus 和 blur 事件。

祝你学习愉快！

​