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>