当前位置：首页 > article >正文

JavaScript的聚焦：focus/blur

article 2024/9/21 10:59:25

🧑‍🎓 个人主页：《爱蹦跶的大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>