iOS系统下如何让带有readOnly属性的<input>元素成功获得焦点？

问题根因 #

iOS 系统浏览器对非用户直接触发的 DOM 操作、焦点切换有安全限制，你编程式直接从一个 <input> 切换焦点到另一个 <input> 时，readonly 属性的修改逻辑没有在可信的用户交互上下文执行，会被系统拦截，只有点击按钮这类明确的用户触发动作对应的逻辑才会被放行，所以才会出现点击按钮后功能正常、连续切换焦点失效的情况。

修复方案 #

• 给连续焦点切换加短延时
  在上一个输入框失焦、下一个输入框聚焦的逻辑之间加 100ms 左右的延时，确保上一个输入框的 blur 回调完全执行完成，再处理下一个输入框的属性修改和聚焦逻辑，示例代码如下：

  // inputA 失焦后跳转到 inputB 的逻辑
  inputA.blur();
  setTimeout(() => {
    inputB.removeAttribute('readonly');
    inputB.focus();
  }, 100);
  

• 确保焦点逻辑在用户交互上下文执行
  所有连续焦点切换的逻辑都要放在用户直接触发的事件回调中执行（比如输入、点击、触摸事件的回调栈里），不要放到异步请求、定时器这类脱离用户交互上下文的回调中运行，避免被 iOS 判定为非可信操作拦截。
• 补充优化方案
  如果调整后仍有问题，可以搭配这两个优化点使用：
  1. 给 <input> 额外添加 autocomplete="off" 属性，和 readonly 配合降低系统自动填充的识别概率
  2. 初始状态给输入框加一层透明遮罩，用户点击遮罩时再移除 readonly 同时触发输入框聚焦，完全绕开系统自动填充的触发逻辑

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