iPhone Safari web表单键盘导航箭头无法跳转屏幕外输入框问题问询

问题说明 #

iPhone端Safari浏览器填写Web表单时，键盘上方的导航箭头存在异常行为：当部分表单输入框初始位于屏幕可视区域外时，点击顶部输入框后，导航箭头仅能在当前可见输入框间跳转，无法导航至屏幕外的输入框。
所涉及的导航按钮如下图：

该问题在搭载iOS 14.7.1的iPhone 7上可稳定复现：其余输入框均位于屏幕外时选中顶部输入框，无法通过箭头向下导航整个表单；若先手动滚动页面再选中输入框，根据选中的输入框和滚动位置不同，偶尔可正常导航。

复现代码 #

以下是可稳定复现问题的最小HTML示例：

<body>
<h1 style="margin: 200px 20px 200px 20px;">Heading</h1>
<form style="display:flex; flex-direction:column;">
    <label for="b3-InputAgreementnumber">Agreement number</label>
    <input required="" type="text"
        autocomplete="off" returnkeytype="next"
        keyboardtype="number-pad" id="b3-InputAgreementnumber" >
    <label for="b3-InputEmail">Email</label>
    <input required="" type="email"
        maxlength="60" autocomplete="new-password" returnkeytype="next"
        id="b3-InputEmail" >
    <label for="b3-InputConfirmationEmail">Confirm Email</label>
    <input required="" type="email"
        maxlength="60" autocomplete="new-password" returnkeytype="next"
        id="b3-InputConfirmationEmail">
    <label for="b3-InputSurname">Surname</label>
    <input required="" type="text"
        maxlength="30" autocomplete="off" returnkeytype="next"
        id="b3-InputSurname" >
    <label for="b3-InputDateofbirth">Date of birth</label>
    <input required="" type="text" placeholder="DD/MM/YYYY" autocomplete="off"
        returnkeytype="next" id="b3-InputDateofbirth">
    <label for="b3-InputPostcode">Enter your postcode</label>
    <input required=""
        type="text" maxlength="10" autocomplete="new-password"
        returnkeytype="next" id="b3-InputPostcode">
    <div>
        <button type="submit">Continue</button>
        <button type="button">Cancel</button>
    </div>
</form>
</body>

原因 #

这是Safari的原生默认行为：为了优化性能，Safari默认只会将当前可视区域内的可聚焦元素纳入键盘导航序列，初始不在可视区域内的输入框不会被识别到导航列表中，因此会出现无法跳转的问题。

通用解决方案 #

以下方案可适配复杂表单场景，稳定修复导航异常问题：

• 强制指定导航顺序：给表单内所有可输入元素按填写顺序依次设置tabindex属性，属性值从1开始连续递增，覆盖Safari默认的可视区域识别逻辑，强制按照指定顺序纳入导航序列。
• 预触发元素识别：页面加载完成后，遍历表单内所有input、textarea等可输入元素，依次执行一次focus()后立即执行blur()，该操作不会弹出键盘，仅触发Safari对所有输入框的位置识别，将其纳入导航序列。
• 表单区域自动滚动：用户触发表单填写时，自动将页面滚动到表单首项输入框的位置，确保所有输入框被Safari识别，若表单过长可拆分为多步式表单，每步仅展示少量输入项，避免出现大量输入框初始位于可视区域外的情况。

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