本文介绍了前端JavaScript中的焦点事件，包括focus/blur事件及其处理方法。通过实例展示了如何在输入框中应用这些事件来验证用户输入，并强调了在处理焦点事件时需要注意的焦点转移逻辑和tabindex属性的使用。
前端 JavaScript 焦點事件處理
何謂聚焦?
所謂聚焦(focus)通常是在說聚焦到一個元素上，而聚焦到一個元素上通常意味著 “準備要此處接受輸入”，所以，這正是我們可以用代碼來初始化一些我們所需的功能的時刻。
失去焦點(blur)可能還更重要一些，這個事件可能發生在當用戶點擊頁面其他地方，或是跑去做別的事情等等。所以失去焦點通常意味著 “數據輸入都已經完成了”，所以我們就可以用代碼來檢查這些輸入，甚至是將其發到服務器上存起來。
處理這些焦點事件是前端很常見，很 basic 的功能，也有一些重要的特性，接下來就來一一做了解。
focus/blur 事件
當元素被聚焦到時，就會觸發 focus 事件，而當元素失去焦點時，就會觸發 blur 事件。
我們用一個 input 輸入框來感受一下。在下面示例中:
focus事件隱藏 error 信息，因為我們要在blur事件再檢查一遍blur事件檢查這個字段是否輸入了郵箱，如果沒有則顯示一個 error
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>focus test</title>
</head>
<body>
Your email : <input type="email" id="email" required>
<div id="info"></div>
</body>
<style>
.invalid {
border-color: red;
}
.error {
color: red;
}
.pass {
color: green;
}
</style>
<script>
let email = document.getElementById('email')
let info = document.getElementById('info')
email
最低0.47元/天 解锁文章
425
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
