iPhone Web 表单键盘导航按钮已禁用答案

【问题标题】：iPhone web form keypad navigation button disablediPhone Web 表单键盘导航按钮已禁用
【发布时间】：2021-10-21 09:32:16
【问题描述】：

我在填写网络表单时遇到了 iphone 上 Safari 上的导航箭头问题。当您单击顶部输入时，表单输入最初显示在屏幕底部时，箭头似乎不像我预期的那样工作。箭头仅在可见字段中导航。我不确定这是否是预期的行为。

我所说的按钮如下所示。

这是一个示例 html 表单，显示了带有 iOS 14.7.1 的 iPhone 7 上的问题。我添加了一些最小的样式来显示问题。

如果您选择顶部输入，而其他输入不在屏幕底部，则无法使用箭头向下导航表单。如果您先向下滚动，然后根据哪个输入和滚动到的位置选择其中一个输入，您有时可以浏览整个表单。

有没有办法让箭头在当前显示的表单中始终如一地导航，或者这只是 iPhone 的“功能”？我的真实表单比这更复杂，所以理想情况下我想要一个更通用的解决方案 - 我已经能够浏览更简单的表单。

<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>

【问题讨论】：

标签： html css iphone web mobile-safari

【解决方案1】：

我还没有找到解决方案，但现在我们决定使用基于此问题答案IOS disable the keyboard tab arrows 的技术禁用此表单上的箭头键。

对于 iPhone，我们将所有输入字段设置为只读，然后在焦点上我们将焦点输入设置为使用 javascript 读取/写入。

这不是一个答案，但对于我的用例来说是一个合理的解决方法。

【讨论】：