focus和blur事件用于处理HTML表单中的焦点控制，通过JavaScript可实现样式变化、实时验证与提示。1. 可使用addEventListener绑定focus和blur事件，实现输入框获得焦点时边框变蓝，失去焦点时恢复原色；2. 也可在HTML中直接使用onfocus和onblur内联属性操作样式，但不推荐；3. 实际应用中常在blur事件中校验邮箱格式，并显示对应提示信息，focus时清除提示；4. 普通div等元素需添加tabindex才能触发焦点事件。合理运用可提升表单交互体验。
在HTML表单中，处理焦点事件主要通过focus和blur事件来实现。当用户将输入焦点放在表单元素上时触发focus事件，当焦点离开该元素时触发blur事件。这两个事件非常适合用于表单验证、提示信息显示或样式调整。
1. 使用JavaScript绑定focus和blur事件
可以通过JavaScript为表单元素绑定焦点获取与失去事件。以下是一个简单的例子：
<input type="text" id="username" placeholder="请输入用户名">
<script>
const input = document.getElementById('username');
input.addEventListener('focus', function() {
this.style.borderColor = 'blue';
console.log('输入框获得焦点');
});
input.addEventListener('blur', function() {
this.style.borderColor = '#ccc';
console.log('输入框失去焦点');
});
</script>
在这个例子中，当用户点击输入框时，边框变为蓝色；当点击页面其他地方时，边框恢复原色。
2. 在HTML中直接使用内联事件（不推荐但可用）
也可以在HTML标签中直接使用onfocus和onblur属性：
立即学习“前端免费学习笔记（深入）”；
<input type="text" onfocus="this.style.backgroundColor='#e0f7fa'" onblur="this.style.backgroundColor='white'" placeholder="点击我试试" >
这种方式虽然简单，但不利于代码维护，建议将JavaScript逻辑分离到外部脚本中。
3. 实际应用场景：实时验证与提示
焦点事件常用于表单的实时校验。例如，在用户填写邮箱后失去焦点时检查格式是否正确：
<input type="email" id="email" placeholder="请输入邮箱地址">
<span id="emailMsg"></span>
<script>
document.getElementById('email').addEventListener('blur', function() {
const value = this.value;
const msgSpan = document.getElementById('emailMsg');
if (!value.includes('@')) {
msgSpan.textContent = '请输入有效的邮箱地址';
msgSpan.style.color = 'red';
} else {
msgSpan.textContent = '✓ 邮箱格式正确';
msgSpan.style.color = 'green';
}
});
// 焦点再次进入时清空提示
document.getElementById('email').addEventListener('focus', function() {
document.getElementById('emailMsg').textContent = '';
});
</script>
4. 注意事项
某些元素默认不能获取焦点，如普通div或span。如果需要让它们响应focus事件，需添加tabindex属性：
<div tabindex="0" id="focusableDiv">我可以获得焦点</div>
<script>
document.getElementById('focusableDiv').addEventListener('focus', () => {
console.log('div获得了焦点');
});
document.getElementById('focusableDiv').addEventListener('blur', () => {
console.log('div失去了焦点');
});
</script>
基本上就这些。focus和blur是表单交互中最基础也最实用的事件之一，合理使用可以显著提升用户体验。
