输入框获取焦点时自动清除默认校验提示，需分别处理原生title提示（focus时清空、blur时恢复）、自定义错误元素（focus时添加hidden类）及校验样式类（focus时移除invalid/error并重置aria-invalid）。
输入框获取焦点时自动清除默认校验提示，核心是监听 focus 事件，并清空与校验相关的提示信息（如 title、data-error、相邻的提示元素或自定义校验类）。关键在于区分“默认校验”是浏览器原生的（如 required、pattern）还是前端自定义的（如 JS 手动添加的错误样式/文案）。
清除浏览器原生校验的 title 提示
很多开发者用 title 属性显示校验提示（例如 title="请输入邮箱"），但它会在 focus 时仍悬浮显示。解决方法是在 focus 时临时移除 title，blur 时再恢复（避免影响无障碍访问）：
<input type="email" id="email" title="请输入有效的邮箱地址" required>
对应 JS：
const input = document.getElementById('email');
const originalTitle = input.title;
input.addEventListener('focus', () => {
input.title = '';
});
input.addEventListener('blur', () => {
input.title = originalTitle;
});
隐藏自定义校验提示元素
如果校验提示是独立的 <span class="error"> 或 <div> 元素，可在 focus 时隐藏它：
立即学习“前端免费学习笔记（深入）”；
- 确保提示元素有明确标识（如 class="error-msg" 或 data-for="email"）
- focus 时设置
style.display = 'none'或切换隐藏类（如hidden） - 推荐用 class 切换，便于 CSS 控制过渡效果
<input type="text" id="username"> <span class="error-msg" data-for="username">用户名不能为空</span>
document.getElementById('username').addEventListener('focus', function() {
const msg = document.querySelector(`[data-for="${this.id}"]`);
if (msg) msg.classList.add('hidden');
});
移除校验失败的样式类
常见做法是校验失败时给 input 添加 invalid 或 error 类（用于红边框、图标等）。focus 时应主动清理这类状态：
- focus 时移除
invalid、error等语义化校验类 - 可同时重置
aria-invalid="true"为"false"（提升可访问性） - 注意：不要在 focus 时直接调用校验逻辑，否则用户还没输入就再次报错
input.addEventListener('focus', () => {
input.classList.remove('invalid', 'error');
input.setAttribute('aria-invalid', 'false');
});
避免干扰原生表单验证行为
浏览器原生校验（如 required）的弹出提示无法通过 JS 直接禁用，但可通过以下方式降低干扰：
- 不用
title做校验提示（改用aria-describedby关联描述元素） - 提交前统一校验，而非依赖 submit 时的原生弹窗
- 对 input 设置
oninvalid="this.setCustomValidity('')"并配合oninput动态更新 validity
例如初始化时关闭原生提示：
<input type="text" required oninvalid="this.setCustomValidity('')" oninput="this.setCustomValidity('')"> 
