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

Question

我有一个 HTML 表单，特别是在 iOS 上，我需要防止用户在存在模式时通过输入进行“Tab 键切换”。

我在“tabbing”周围加了引号，因为 iOS 键盘没有标准的 tab 键，它使用键盘上方工具栏中的上一个/下一个箭头。 (见下图)

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

Answer 1

我最终实现的解决方案如下所示:

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();
}

每当使用“下一个”箭头时，不可见的输入就会获得焦点。它会立即将焦点放回到原始输入上；从而防止非模态输入获得焦点。