如何防止由 iOS uikeyboard 箭头触发的 "tab" 操作？

Question

我有一个 HTML 表单，具体来说，在 iOS 上，我需要防止用户 "tabbing" 在出现模态时通过输入。

我在 "tabbing" 周围加上引号，因为 iOS 键盘没有标准的 tab 键，它使用键盘上方工具栏中的 prev/next 箭头。（见下图）

这些键没有附加 DOM 事件，因此读取 e.keyCode 和使用 e.preventDefault() 不是选项。有什么想法吗？

Answer 1

很遗憾，我没有 iOS 可以测试。但我认为您可以尝试以下操作：

禁用除第一个以外的所有输入。
用户输入一些信息并验证后，启用下一个输入
等等。

有点奇怪，但它可能有效 =)。

PS。刚刚意识到。您的意思是当存在模态时用户能够切换到输入 "under" 模态？

在这种情况下，您必须在模态表单的第一个元素上强制使用 focus()，这样 "tabbing" 将在您的新表单中工作。

Answer 2

我最终实施的解决方案如下所示：

HTML

<!-- modal content -->
<div class="search-modal">
  <input type="search" id="search-input" />
  <input type="text" onfocus="refocus('search-input')" style="opacity:0;" />
</div>

<!-- main page content -->
<div class="page-body">
  <input type="text" name="fname" />
  <input type="text" name="lname" />
  <input type="email" name="email" />
  <input type="tel" name="phone" />
  <!-- ... -->
</div>

JS

function refocus(id){
  document.getElementById(id).focus();
}

只要使用 "next" 箭头，不可见的输入就会获得焦点。它会立即将焦点放回到原始输入上；从而防止非模态输入获得焦点。

如何防止由 iOS uikeyboard 箭头触发的 "tab" 操作？

How to prevent "tab" action triggered by iOS uikeyboard arrows?

javascript

html

ios

uikeyboard