IOS 蓝牙键盘 - 输入 - Tab 事件

Question

IOS 蓝牙键盘 - 输入 - Tab 事件

javascriptiosipadbluetoothkeydown

35

背景： 我有一个文本区域。当用户输入时，我捕获Tab键事件，并插入一个制表符（\t），防止浏览器聚焦到下一个输入框。这在所有浏览器上的Mac和PC上都可以正常工作。

问题： 当使用连接到iPad的蓝牙键盘时，此方法无法工作。文档会注册Tab键事件，但只要我将焦点集中在文本区域上，所有Tab键事件就会被忽略并不会发送到浏览器。我也已经测试了文本输入，结果相同。

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

简单监听器：

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

当您选择了body（而不是textarea）时，tab键事件被注册并出现数字9。任何其他按键事件也会出现。

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

如果有人有解决方法，我将万分感激。

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

我已经进行了研究，只能想到iOS不希望在输入/文本区域中释放TAB键的控制权。我尝试访问像Google Docs这样的网站，看看它们是否绕过了这个问题，但它们强制你下载App，而不允许你在iOS Safari中编辑文件。我猜这是因为iOS想要完全控制tab键。我尝试在iOS上使用Chrome，但它的功能与Safari相同，所以我认为这不是Safari的问题，而是iOS的问题。

一个可能的、但未经测试的解决方法是编写一个整个

来像一个textarea一样工作，然后用div替换textarea。由于tab键在所有其他元素上都有效，理论上应该可以正常工作，但需要大量的Javascript和CSS使一个元素像另一个元素一样工作。

编辑2：

我发现使用Option+Tab允许在textarea中捕获tab键。虽然我觉得这不够令人满意。当我在普通键盘上输入段落时，我不会输入Option+Tab，我只是输入Tab。据我所知，在textarea内部没有办法单独捕获Tab键。

- Tim Withers

在iOS键盘上按下OPT+tab是否与非仪器键盘上的tab执行相同的操作？ - Sam H.

你尝试过使用http://dmauro.github.io/Keypress/吗？ - Sam H.

我已经尝试了dmauro的keypress库，但结果相同。我会看看是否有其他与tab键组合的按键可以使用。我认为iOS的怪异性是整个问题的原因，但我不认为它完全与事件冒泡有关。我认为，但不确定，文本区域和输入字段仅禁用Tab键，以便浏览器可以控制表单字段之间的移动，以改善用户体验，但在向文本区域中添加一个合法的Tab时，他们妨碍了这一点。 - Tim Withers

@TimWithers，你解决了这个问题吗？看看我的答案。 - Firanolfind

我完全同意。只是在努力弄清楚它。 - Sam H.

显示剩余2条评论

2个回答

1

你可以尝试使用这个库来实现以下事件：

previousbuttonclick（上一个按钮点击）
nextbuttonclick（下一个按钮点击）

然后，当你检测到文本框旁边的元素被聚焦时，回到你的文本框并插入任何你想要的内容。

- Ernesto Schiavo

如果您想要赏金，我希望能看到一些使用这个库来产生所需效果的代码。据我所知，它仍然无法正常工作。 - Tim Withers

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Firanolfind · Accepted Answer

我相信这是iOS中标签页已知的问题。我在stackoverflow上找到了类似的问题。只需在你的代码之前添加此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);
  });
};

请检查，应该可以工作。示例