带有 Jquery 的虚拟键盘答案

【问题标题】：Virtual Keyboard with Jquery带有 Jquery 的虚拟键盘
【发布时间】：2013-03-15 11:48:44
【问题描述】：

我有一个作为按钮操作的 div。单击按钮后，我希望它模拟按键。在 Stackoverflow 的其他地方，人们建议使用 jQuery.Event("keydown");，但这些建议都使用绑定到按钮的 .trigger()，而不是 .click。所以，我的示例代码如下所示：

var press = jQuery.Event("keydown");
press.which = 69; // # The 'e' key code value
press.keyCode = 69;

$('#btn').click( function() {
    $('#testInput').focus();
    $(this).trigger(press);
    console.info(press);
});

我在 JSFiddle 设置了一个虚拟示例： http://jsfiddle.net/ruzel/WsAbS/

最终，我不想让按键填充表单元素，我只想将事件注册为文档的按键，以便 MelonJS 游戏可以拥有它。

更新：出于安全原因，浏览器可能会忽略使用键盘以外的任何东西触发按键。为了更新文本输入，这个非常棒的 Jquery 插件可以解决问题：http://bililite.com/blog/2011/01/23/improved-sendkeys/

对于任何来这里寻找MelonJS案例解决方案的人，最好使用MelonJS的me.input对象，像这样：

$('#btn').mousedown(function() {
    me.input.triggerKeyEvent(me.input.KEY.E, true);
});

$('#btn').mouseup(function() {
    me.input.triggerKeyEvent(me.input.KEY.E, false);
});

【问题讨论】：

那么你的问题是什么？如果您想在document 上触发它，只需使用它而不是this。 $(document).trigger(press);
我不确定 MelonJS 需要什么，但我认为您正在寻找 $('#testInput').trigger(press); 而不是 $(this).trigger(press);。这实际上不会在文本框中插入任何文本，但它会模拟在该文本框中按下的 69 键码。它会自动冒泡到document（.trigger 的本质）-jsfiddle.net/WsAbS/5
谢谢，伊恩。是的，就像我在上面的更新中所说的那样，您似乎无法将按键发送到并非来自实际键盘的输入，因为安全原因。至于 MelonJS，我也在上面的更新中解决了这个问题。

标签： javascript jquery input keypress melonjs

【解决方案1】：

我不知道为什么，但即使这个正确触发了事件，它也不会用字符填充输入。

我修改了代码以显示当我们说$(document).trigger(p)时文档确实收到了按键事件

试试看： http://jsfiddle.net/WsAbS/3/

var press = jQuery.Event("keydown");
press.which = 69; // # Some key code value
press.keyCode = 69;
press.target = $('#testInput');


$(document).on('keydown', function(event) {
    alert(event.keyCode);
});

$('#btn').click( function() {
    $(document).trigger(press);
});

我相信这应该足以满足您的 MelonJS 游戏拾取按键的最终目标。

【讨论】：

但这是不必要的。在$(this)（或document 中的任何内容）上触发事件会导致事件冒泡到document，无论如何它都会被它捕获。
好的，但我的意思是创建一个简单的证据来证明这会触发 keydown 事件。如果我们真的要进入this 与document，为什么不首先说document，如果这是我们希望它冒泡的地方？更清晰，节省电脑时间。
你说的是真的，但它不会模拟文本框的 keydown 事件。在您的示例中，它不会像正常的 keydown 事件（例如物理按下键盘上的键）那样在 DOM 链中冒泡。你怎么知道没有其他元素监听这个事件需要它有正确的起源？我认为 OP 无论如何都会在错误的元素上触发它 - this 指的是伪按钮，但他们应该在 input 元素上触发它。似乎准确性比“节省计算机时间”更重要，但我又不知道 MelonJS 需要什么。
我最初也认为（那个 OP 触发了错误的元素），但是当我在 JSFiddle 中将其更改为 $('#testInput').trigger(press); 时，它仍然不起作用。你是对的，它可能需要从特定元素中冒出来，但我认为 OP 可以根据他的特定需求更改这个简单的示例。
@crazedgremlin——我只是假设如果输入元素可以从另一个 DOM 对象接收到按键事件，那么我可以很容易地将该事件发送到 MelonJS UI。在这一点上，我什至不确定这是否属实。我实现了您的代码来检查事件是否发生，并且您的代码确实会提醒按键，但 MelonJS（以及文本输入）没有对其做出反应。如果你想更好地了解 MelonJS 的情况，代码在这里：russellbits.com/labs/bloop/ipad.html

【解决方案2】：

如果您想要一个虚拟键盘（如标题所示），您可以使用this one。

【讨论】：

不完全是我想要的，但对链接表示赞赏。我相信这在未来会派上用场。