iPhone/iPad网页加载时Input标签autofocus失效问题求助

问题根源 #

iOS上的Safari（包括Chrome等基于WebKit内核的浏览器）出于用户体验保护，会拦截非用户主动交互触发的自动聚焦操作，这就是原生autofocus属性或直接调用focus()方法失效的核心原因。

可行解决方案 #

1. 监听用户首次交互触发聚焦 #

页面加载完成后，监听用户的第一次点击/触摸操作，在交互回调中执行聚焦——这属于用户主动触发的行为，浏览器不会拦截。

document.addEventListener('DOMContentLoaded', () => {
  const targetInput = document.getElementById('your-input-id');
  
  const focusInputOnInteraction = () => {
    targetInput.focus();
    // 仅执行一次，移除监听避免重复触发
    document.removeEventListener('click', focusInputOnInteraction);
    document.removeEventListener('touchstart', focusInputOnInteraction);
  };

  // 同时监听点击和触摸事件，覆盖不同操作场景
  document.addEventListener('click', focusInputOnInteraction);
  document.addEventListener('touchstart', focusInputOnInteraction);
});

2. 在用户触发的动作内执行聚焦 #

如果是在弹窗、侧边栏等组件显示时需要聚焦，直接在触发组件显示的用户事件（比如按钮点击）中调用focus()：

const openBtn = document.getElementById('open-modal-btn');
const modalInput = document.getElementById('modal-input');
const modal = document.getElementById('modal');

openBtn.addEventListener('click', () => {
  // 先显示组件
  modal.style.display = 'block';
  // 立即聚焦输入框
  modalInput.focus();
});

3. 延迟聚焦（可靠性较低，仅作补充） #

若页面是通过用户操作跳转进入的，可尝试在页面加载完成后延迟短时间执行聚焦，但这种方式仍可能被浏览器拦截，仅建议作为备选：

window.addEventListener('load', () => {
  setTimeout(() => {
    document.getElementById('your-input-id').focus();
  }, 100);
});

注意事项 #

• 确保操作时目标input元素已完全渲染到DOM中，优先使用DOMContentLoaded事件而非直接在脚本中执行。
• 不要尝试在页面加载阶段直接调用focus()，这类无用户交互的操作在iOS上必然会被拦截。
• 若为APP内嵌的WebView页面，可能需要客户端配合配置允许自动聚焦的权限。

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