如何用Vanilla JavaScript复现目标focus功能？现有.focus()效果不符

针对你想用原生JS复现图中功能但.focus()达不到预期的情况，给你几个实用的排查和解决办法：

1. 先确认DOM加载完成再操作 #

要是页面还没加载完就调用.focus()，肯定白搭。把代码放到DOM加载完成的事件里：

document.addEventListener('DOMContentLoaded', function() {
  const targetInput = document.getElementById('你的输入框ID');
  const triggerElement = document.getElementById('触发聚焦的元素ID');
  
  triggerElement.addEventListener('click', function() {
    targetInput.focus();
  });
});

2. 移动端唤起键盘的坑 #

不少移动端浏览器对.focus()的触发有要求：必须是用户真实的点击/触摸事件触发，不能是定时器、异步请求回调这类非用户交互的场景。如果是异步后要聚焦，得先抓准用户交互的上下文：

// 错误示例：接口请求完直接focus大概率不生效
fetch('/接口地址').then(res => {
  targetInput.focus(); // 移动端可能没反应
});

// 正确操作：先通过用户点击拿到交互上下文，异步里再调用
let userActionCtx = null;
triggerElement.addEventListener('click', function() {
  userActionCtx = this;
  fetch('/接口地址').then(res => {
    if (userActionCtx) {
      targetInput.focus();
    }
  });
});

3. 检查输入框的disabled/readonly属性 #

要是输入框设了disabled或者readonly，.focus()直接失效。可以先移除这些属性再聚焦，之后需要的话再恢复：

triggerElement.addEventListener('click', function() {
  targetInput.removeAttribute('disabled');
  targetInput.removeAttribute('readonly');
  targetInput.focus();
  // 失去焦点后恢复readonly状态
  targetInput.addEventListener('blur', function() {
    targetInput.setAttribute('readonly', true);
  }, { once: true });
});

4. 自定义焦点视觉反馈 #

如果.focus()实际生效了，但看不到图里的焦点样式，可能是默认样式被覆盖了，手动加个样式就行：

#你的输入框ID:focus {
  outline: 2px solid #007bff;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
}

5. 针对数字输入场景的优化 #

要是图里是点击数字按钮填充输入框同时保持焦点，每次点击按钮后都要重新调用.focus()，防止键盘收起：

const numberBtns = document.querySelectorAll('.数字按钮类名');
const targetInput = document.getElementById('数字输入框ID');

numberBtns.forEach(btn => {
  btn.addEventListener('click', function() {
    targetInput.value += this.textContent;
    targetInput.focus(); // 点击后保持焦点，键盘不会自动收起
  });
});

内容的提问来源于stack exchange，提问作者Mike