Question

背景我有一个textarea。我在用户输入时捕获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），则会注册Tab键事件并显示数字9。任何其他关键事件也会出现。

如果选择了textarea，则所有keydown事件都会在body侦听器和textarea侦听器上注册...除了tab键之外。

如果有人有解决方案，我会永远感激。

修改我已经修复了＃34;观察5个空格，然后将其转换为制表符。

我研究了这个，并且只能说明iOS在关注输入/ textareas时不想释放对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。据我所知，没有办法在textarea中单独捕获Tab键。

Answer 1

您可以尝试使用this library来举办这些活动：

previousbuttonclick
nextbuttonclick

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

Answer 2

我相信这是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

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

2 个答案: