Angular应用移动端浏览器Input自动聚焦失效问题求助

针对你遇到的PC端正常、Android Chrome中focus()和scrollIntoView()失效的问题，可以尝试以下几种可行方案：

• 确保聚焦操作在用户交互上下文内执行
  移动端浏览器（包括Android Chrome）会限制非用户主动触发的DOM操作，比如如果你的聚焦逻辑是在定时器、Promise回调等非用户交互事件中执行，很可能被拦截。建议将聚焦逻辑绑定到当前输入框的input或keyup等用户直接触发的事件中：

  const inputs = document.querySelectorAll('.input-group input');
  inputs.forEach((input, idx) => {
    input.addEventListener('input', () => {
      // 根据你的业务逻辑判断是否需要跳转下一个输入框，比如内容填满时
      if (input.value.length === input.maxLength && idx < inputs.length - 1) {
        const nextInput = inputs[idx + 1];
        nextInput.focus();
        nextInput.scrollIntoView({ block: 'nearest', behavior: 'auto' });
      }
    });
  });
  

• 添加元素可聚焦属性并调整聚焦参数
  部分情况下，输入框可能因为缺少tabindex属性或聚焦参数设置问题导致失效，可以显式设置属性并调整focus的配置：

  const nextInput = document.getElementById(ne);
  if (nextInput) {
    // 确保元素可被聚焦
    if (!nextInput.hasAttribute('tabindex')) {
      nextInput.setAttribute('tabindex', '0');
    }
    // 关闭preventScroll，确保滚动行为生效
    nextInput.focus({ preventScroll: false });
    // 调整scrollIntoView参数，适配移动端视口
    nextInput.scrollIntoView({ block: 'center', behavior: 'instant' });
  }
  

• 检查输入框状态
  确认目标输入框没有被设置为disabled、readonly，且元素的display不为none、visibility不为hidden，这些状态都会导致focus()无法生效。

• 必要时使用微小延迟（谨慎使用）
  如果上述方法都无效，可以尝试给聚焦操作添加100ms以内的延迟，确保浏览器完成当前输入的渲染流程后再执行聚焦：

  setTimeout(() => {
    const nextInput = document.getElementById(ne);
    if (nextInput) {
      nextInput.focus();
      nextInput.scrollIntoView();
    }
  }, 50);
  

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