极客教程JS获取焦点事件用法介绍
简介
在JavaScript中，焦点是指当前用户交互的元素。获取焦点事件用于在特定元素上添加事件监听器，以便在用户将焦点移动到该元素时执行特定的操作。本文将详细介绍JS中获取焦点事件的用法和相关示例代码。
focus事件
focus事件在元素获得焦点时触发。可以在HTML中通过添加onfocus属性或在JavaScript中使用addEventListener方法来绑定focus事件。
示例代码：
<!DOCTYPE html>
<html>
<head>
<script>
function focusEvent() {
const element = document.getElementById("demo");
element.style.backgroundColor = "yellow";
}
function init() {
const element = document.getElementById("demo");
element.addEventListener("focus", focusEvent);
}
</script>
</head>
<body>
<input type="text" id="demo" onfocus="focusEvent()">
</body>
</html>
当文本框获得焦点时，其背景颜色将变为黄色。
blur事件
失去焦点时会触发blur事件。与focus事件类似，可以通过添加onblur属性或使用addEventListener方法来绑定blur事件。
示例代码：
<!DOCTYPE html>
<html>
<head>
<script>
function blurEvent() {
const element = document.getElementById("demo");
element.style.backgroundColor = "white";
}
function init() {
const element = document.getElementById("demo");
element.addEventListener("blur", blurEvent);
}
</script>
</head>
<body>
<input type="text" id="demo" onblur="blurEvent()">
</body>
</html>
当文本框失去焦点时，其背景颜色将恢复为白色。
focusin事件和focusout事件
focusin事件和focusout事件是focus事件和blur事件的冒泡版本。当元素获得焦点或失去焦点时，相应的focusin或focusout事件会触发，并按照从外到内的顺序冒泡。
示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
padding: 20px;
background-color: whitesmoke;
}
.container div {
padding: 10px;
background-color: white;
}
</style>
<script>
function focusinEvent() {
const element = document.getElementById("demo");
element.classList.add("focused");
}
function focusoutEvent() {
const element = document.getElementById("demo");
element.classList.remove("focused");
}
function init() {
const container = document.querySelector(".container");
container.addEventListener("focusin", focusinEvent);
container.addEventListener("focusout", focusoutEvent);
}
</script>
</head>
<body>
<div class="container">
<div>
<input type="text" id="demo">
</div>
</div>
</body>
</html>
当文本框获得焦点时，容器div的背景颜色会变为浅灰色；当文本框失去焦点时，容器div的背景颜色会恢复为白色。
focus事件和blur事件的应用
通过focus和blur事件，可以实现一些与用户交互相关的功能。
表单验证
使用focus事件和blur事件可以在用户输入表单时进行验证。比如，当用户点击一个输入框时，可以显示一条提示消息；当用户输入结束并移开焦点时，可以验证输入的内容是否符合要求。
示例代码：
<!DOCTYPE html>
<html>
<head>
<script>
function checkInput() {
const inputElement = document.getElementById("input");
const errorMessageElement = document.getElementById("error-message");
if (inputElement.value.trim() === "") {
errorMessageElement.style.display = "block";
} else {
errorMessageElement.style.display = "none";
}
}
function init() {
const inputElement = document.getElementById("input");
inputElement.addEventListener("blur", checkInput);
}
</script>
</head>
<body>
<input type="text" id="input">
<p id="error-message" style="display: none; color: red;">请输入内容</p>
</body>
</html>
当输入框失去焦点时，若输入框内为空则显示错误消息。
自动完成
当用户在输入框中输入时，可以使用focus事件来实现自动完成的功能。比如，在用户输入时，可以根据输入内容动态显示匹配的建议选项。
示例代码：
<!DOCTYPE html>
<html>
<head>
<script>
function showSuggestions() {
const inputElement = document.getElementById("input");
const suggestionsElement = document.getElementById("suggestions");
// 根据输入内容获取匹配的建议选项
const inputValue = inputElement.value;
const suggestions = getSuggestions(inputValue);
// 显示建议选项
suggestionsElement.innerHTML = "";
for (let suggestion of suggestions) {
const suggestionItem = document.createElement("div");
suggestionItem.textContent = suggestion;
suggestionsElement.appendChild(suggestionItem);
}
suggestionsElement.style.display = "block";
}
function hideSuggestions() {
const suggestionsElement = document.getElementById("suggestions");
suggestionsElement.style.display = "none";
}
function getSuggestions(inputValue) {
// 根据输入内容从数据库或服务器获取匹配的建议选项
return ["apple", "banana", "orange"];
}
function init() {
const inputElement = document.getElementById("input");
inputElement.addEventListener("focus", showSuggestions);
inputElement.addEventListener("blur", hideSuggestions);
}
</script>
</head>
<body>
<input type="text" id="input" autocomplete="off">
<div id="suggestions" style="display: none;"></div>
</body>
</html>
当输入框获得焦点时，根据输入内容显示匹配的建议选项；当输入框失去焦点时，隐藏建议选项。
总结
通过focus事件和blur事件，我们可以在JavaScript中获取焦点事件并进行相应的操作。我们可以使用这些事件来验证表单、实现自动完成等与用户交互相关的功能。无论是使用HTML的onfocus和onblur属性，还是使用JavaScript的addEventListener方法，都可以方便地在特定元素上添加焦点事件的监听器。