Javascript - 带蓝牙键盘的 iPad Tab 键检测

Posted 2023-03-12

【中文标题】Javascript - 带蓝牙键盘的 iPad Tab 键检测

【英文标题】：Javascript - iPad Tab Key Detection w/ Bluetooth Keyboard

【发布时间】：2016-05-09 17:11:43

【问题描述】：

我有一个文本字段，用户可以在其中输入数据。他们可以使用 tab 键，然后字段缩进。这适用于除带有蓝牙键盘的 ios 之外的所有设备。

如果我访问http://www.rapidtables.com/tools/notepad.htm，我可以在我的台式机/笔记本电脑上进行标签。但在我的 iPad 上……没有骰子。

如果我访问https://api.jquery.com/keydown/、https://api.jquery.com/keyup/、https://api.jquery.com/keypress/ ...它们都没有检测到 iPad 上的 Tab 键。

tab 键适用于 ios 原生应用程序，例如 Notes，并且 tab 键确实在网页内的字段之间导航。有没有一种方法可以检测任何人都知道的 javascript 中的 tab 键？

编辑

这是我拼凑起来的一个小提琴，因此您可以看到代码和实际问题：https://jsfiddle.net/9jv0bmbx/1/ 基本上我只是检查在台式机/笔记本电脑上工作的e.keyCode===9。在 iPad 上，它会注册每个键除了 tab 键。

【问题讨论】：

因此，如果您在有问题的设备上按下选项卡时记录按键，它不会记录任何内容吗？如果不是，则可能是该选项卡正在退出该字段而没有在该字段上实际触发按键。尝试制作一个全局按键记录器，看看是否可以记录一个选项卡。以下应该做到这一点。 $(document).keydown(function(e) console.log(e.keyCode););

我将它添加到小提琴中。依然没有。但是第一个字段中的 tab 键仍将焦点移动到第二个字段。因此，应用程序（浏览器）注册了 tab 键来处理焦点事件，但不是我猜测的键盘事件。 chrome 和 safari 我都试过了，结果一样。

得到我的手...我的建议没有奏效。对不起。

我的天我让它工作了一秒钟，现在它不是......给我一分钟。

【参考方案1】：

EDIT2：

这是解决方案的另一种选择。我发现了一篇关于如何捕获所有事件的文章。下面是一个jsfiddle，这里是article我发现了这个概念。请注意，在 jsfiddle 中，我返回了原始的 addEventListener，因为在添加空白侦听器后，您需要完成的操作。

jsfiddle

var oldAddEventListener = EventTarget.prototype.addEventListener;

EventTarget.prototype.addEventListener = function(eventName, eventHandler)

  oldAddEventListener.call(this, eventName, function(event) 
      if(event.target.id === "textarea" && event.keyCode===9)
        event.preventDefault();
        $(this).val($(this).val()+"\t");
        $("#log").append("<li>Tab Pressed</li>");
      
    eventHandler(event);
  );
;
$("#textarea").keydown(function(e) 

);

EventTarget.prototype.addEventListener = oldAddEventListener;

编辑：

此处的测试键盘捕获 tab 键按下。查看这个库，它应该可以解决您的问题。要么直接使用该库，要么通过挖掘代码找出它如何在 iOS 上捕获选项卡。 http://dmauro.github.io/Keypress/

有某种硬件/功能键问题妨碍了正常的 Tab 键按下。按 OPTION+Tab 会像平常一样触发你的处理程序。也许是某种设置导致了这种情况，但显然你不能期望你的用户改变他们的设置来使用你的应用程序。您也许可以找到某种方法来以某种方式利用它，但似乎这是默认行为并且您被它所困。

可能会检测到 iOS 设备并找出某种覆盖选项卡默认行为的方法。或者您可以捕获 focusOut 或模糊事件并检测它是否不是由鼠标引起的。

【讨论】：

我还有一个解决方案要进行编辑，但我必须等待那个拿着 iPad 的人吃完午饭回来才能解锁它 XD。

我刚刚设置了jsfiddle.net/gqxgax76，看看我是否可以使用 Keypress。我发现当文档/窗口有焦点并且没有元素有焦点时，就会识别 tab 键。一旦您专注于输入/文本区域，选项卡就不再起作用。我将看看我是否可以让第二个示例工作。

那个 jsfiddle 没有在我这边显示标签。 OPT+Tab 仍然有效。