当用户打开外卖App却要手动点击搜索框，在政务网站填表总被光标位置搞晕，这些细节正默默摧毁产品体验。今天我们从5个真实场景出发，破解输入框焦点设置的实战难题。

▌??场景一：登录页自动弹键盘??
刚进入银行App登录界面，光标就应该出现在密码框吗？错！??正确的做法是优先聚焦手机号输入框??。用HTML5的autofocus属性最省事：

html运行复制
<input type="tel" autofocus placeholder="请输入银行预留手机号">

但要注意安卓4.4以下机型可能失效，这时候需要JS兜底：

javascript复制
document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('[type="tel"]').focus()
})

??避坑指南??：政务类网站慎用自动聚焦，可能触发老年人用户的恐慌情绪。

▌??场景二：动态表单的焦点接力??
当用户填写完身份证号，系统自动跳转到下一个输入项才够智能。这时候需要??事件监听+条件判断??：

javascript复制
document.getElementById('IDCard').addEventListener('input', (e) => {
  if(e.target.value.length === 18) {
    document.getElementById('education').focus({preventScroll:true})
  }
})

??关键参数??：preventScroll能防止页面突然跳动，这在移动端长表单中尤为重要。

▌??场景三：异步加载内容的焦点捕获??
电商后台管理系统里，点击「新增商品」弹出异步加载的模态框，这时候直接调用focus()会失效。??setTimeout强制延迟??才是王道：

javascript复制
setTimeout(() => {
  const skuInput = document.querySelector('.modal-input')
  skuInput?.focus()
}, 300)

哪怕延迟设为0也能奏效，因为JS事件循环机制会等DOM更新完毕。

▌??场景四：移动端键盘的攻防战??
在微信浏览器做H5活动页时，iOS系统死活不弹虚拟键盘。这时候需要??伪造点击事件??：

javascript复制
// 先让用户点击「立即参与」按钮
document.getElementById('btn').addEventListener('click', () => {
  const fakeDiv = document.createElement('div')
  fakeDiv.style.height = '0'
  document.body.appendChild(fakeDiv)
  fakeDiv.focus()
  setTimeout(() => {
    document.getElementById('phone').focus()
    fakeDiv.remove()
  }, 100)
})

这个「替身攻击」技巧能绕过微信浏览器的安全限制。

▌??场景五：无障碍适配的隐藏考点??
政府类网站必须考虑视障用户，当验证码输入错误时，不能只是控制台报错。要同时聚焦错误提示区域：

javascript复制
function showError() {
  const errorTip = document.getElementById('errorTip')
  errorTip.focus()
  errorTip.setAttribute('role', 'alert')
}

配合tabindex="-1"让div元素也能接收焦点，再用ARIA标签实现屏幕阅读器播报。

??急诊室案例??：某政务App在老年人群体投诉量暴增，排查发现自动聚焦身份证字段导致用户误以为信息泄露。改为手动点击触发后，投诉率下降72%。这说明??技术方案必须适配使用场景??，不是所有输入框都适合自动聚焦。