IOS蓝牙键盘-输入-选项卡事件

Question

背景： 我有一个文本区域。我在用户键入时捕获 Tab 键事件，并插入一个 Tab 字符 (\t) 并防止浏览器专注于下一个输入。 这在 Mac 和 PC 上以及所有浏览器上都可以正常工作。

问题： 使用连接到 iPad 的蓝牙键盘时，这不起作用。该文档注册了 tab 键事件，但是只要我关注 textarea，所有 tab 键事件都会被忽略并且不会发送到浏览器。我也使用文本输入进行了测试，并且看到了相同的结果。

示例： https://plnkr.co/edit/NQvxijj3ISZ0B48fSHvi?p=preview

简单的监听器：

$(function(){
  $("body").bind("keydown",function(e){
    $("#bodyLog").append($("<div/>").html(e.keyCode));
    return e.preventDefault();
  });
});

当您选择了正文（不是 TEXTAREA）时，将注册制表键事件并显示数字 9。任何其他关键事件也会出现。

当您选择了 textarea 时，所有 keydown 事件都会在 body 侦听器和 textarea 侦听器上注册...除了 tab 键。

如果有人有解决方案，我将永远感激不尽。

编辑 我已经通过观察 5 个空格，然后将其转换为制表符来“解决”这个问题。

我对此进行了研究，只能认为 iOS 不想在专注于输入/文本区域时释放对 TAB 键的控制。我曾尝试访问 Google Docs 之类的网站，看看他们是否已经绕过它，但它们会强制您下载该应用程序，而不是允许您在 iOS 上的 Safari 中编辑文件。我猜这是因为 iOS 想要完全控制 tab 键。我在 iOS 上尝试过 Chrome，但它的功能相同，所以我想说这不是 Safari 的问题，而是 iOS 的问题。

一种可能但未经测试的解决方法是将整个 <div> 编码为像 textarea 一样，然后用 div 替换 textarea。由于 tab 键适用于所有其他元素，理论上它应该可以工作，但它需要相当多的 Javascript 和 CSS 才能使一个元素表现得像另一个元素。

编辑 2

我发现使用 Option+Tab 可以在 textarea 中捕获 tab 键。不过我觉得不是很满意。当我在普通键盘上键入段落时，我不键入 Option+Tab，我只是键入 Tab。据我所知，没有办法在文本区域内单独捕获 Tab 键。

Answer 1

我相信这是 iOS 中标签的已知问题。我在 stackoverflow 上发现了类似的 question。只需在您的代码之前添加此 hack：

var oldAddEventListener = EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener = function(eventName, eventHandler){
  oldAddEventListener.call(this, eventName, function(e) {
      if(e.target.id === "textarea" && e.keyCode===9){
        e.preventDefault();
      }
    eventHandler(e);
  });
};

请检查，它应该可以工作。 Example

Answer 2

您可以尝试使用this library 来进行这些事件：

• 上一个按钮点击
• 下一个按钮点击

然后，当您检测到 textarea 旁边的元素被聚焦时，您会回到您的 textarea 并插入您想要的任何内容。