模拟 shift + 1 键盘事件并在事件处理程序中检索它答案

【问题标题】：Simulate shift + 1 keyboard event and retrieve it in a event handler模拟 shift + 1 键盘事件并在事件处理程序中检索它
【发布时间】：2014-04-14 16:00:33
【问题描述】：

我正在为需要使用shift 键测试事件的框架制定规范。所以我想务实地插入一个!，就好像我按下了shift + 1。

我一直在使用 Syn 框架，但无法使其模拟 SHIFT + 1。 According to the docs应该是

Syn.type('[shift]1[shift-up]', 'textInput2');

但这不起作用。我希望! 字符，event.shiftKey 是true，和 event.key 是33 但我得到一个1 而不是! 和一个@改为 987654335@。

如何使用 Syn 或 vanilla javascript 实现这一点？

我made this jsFiddle 对此进行测试，检查控制台。

【问题讨论】：

如果您的目标是测试代码（例如单元测试），您不应该为模拟环境而烦恼。相反，您应该进行抽象并消除环境依赖关系。基本上，使用表示环境的接口，而不是直接表示环境。
@Tengiz，感谢您的反馈。不太确定我明白你的意思。我正在尝试使用 JS（以及后来的 Grunt-Jasmine）作为接口来模拟。我也想尽可能抽象，但我需要尝试浏览器上的行为......

标签： javascript unit-testing keyboard-events syn

【解决方案1】：

如果您在此处查看 Syn 测试 https://github.com/bitovi/syn/blob/c77ae2cbb19ff0a5d3ecd3f9968e15adad289a79/test/qunit/key_test.js

您可以看到他们通过执行“[shift]A[shift-up]”来模拟大写字母“A”。 Syn 简单地创建一个事件并传递和设置值。它不模拟较低级别的键盘交互。

 Syn.type('[shift]![shift-up]', 'textInput2');
 // outputs 33 true

设置超时将使其工作，不知道为什么，但确实如此：http://jsfiddle.net/2zsNV/5/

【讨论】：

我的控制台在你的小提琴上显示33 false 。你用的是哪个浏览器？
我正在使用 chrome。但我回去测试它，你是对的，有时它确实打印 33 false 但如果你点击运行几次，它会打印 33 false、33 true、33 true、33 false、33 true。所以我去看看github.com/bitovi/syn/blob/…这里的测试，他正在使用像jsfiddle.net/2zsNV/2这样的settimeout。我不确定为什么会发生这种情况，但我会调查一下。
jsfiddle.net/2zsNV/5。我不确定是什么问题，但似乎通过将其推迟到下一个事件周期使其工作

【解决方案2】：

好的，你说得对，Syn 没有正确执行此操作，我可以猜到原因 - 浏览器无法告诉你的键盘布局（见这里：detect keyboard layout with javascript）所以它真的无法告诉你什么应该得到 Shift+1，所以它只会给你一个“1”。

你会认为

Syn.type('[shift]![shift-up]', 'textInput2');

会按预期工作，但那也不是...我认为这是 Syn 中的一个错误。

那么，你能用原始的 JavaScript 来做吗？我可以靠近。

显然，让它跨浏览器运行非常困难，这让我陷入了尝试不同事物的困境。首先，我查看了这个问题：Is it possible to simulate key press events programmatically?，但这在 chrome 中无法正常工作，然后我根据他们的文档尝试了各种事件和值的组合，但没有取得更大的成功。然后我发现了这个问题：Firing a keyboard event on Chrome，这让我想到了这个code。

将该代码粘贴到 JS 中，然后调用它：

var e = crossBrowser_initKeyboardEvent("keypress", {"key": 1, "char": "!", shiftKey: true})
document.getElementById('textInput2').dispatchEvent(e);

会给出你期望的输出。但是，它实际上并没有将值写入输入框中。当然，您可以伪造它并在那里添加文本，我不确定这是否是事件工作方式的限制，或者代码是否有问题。当然，对于测试，这可能就是您所需要的。

这是fiddle，也许其他人可以做出最后的跳跃。

【讨论】：