javascript - 如何将未处理的按键发送到特定的输入字段？

Question

我正在尝试做以下看似简单的事情。

If a key is pressed that would have typed a character in a text input field, and that keypress is not already handled elsewhere (e.g. no input field had the focus), then focus one particular input field and type the character there.

这是为了让用户在需要快速响应的浏览器游戏中无需点击鼠标，但它同样可以用在聊天应用程序中。如果用户不小心忘记聚焦这个(大而明显的)输入字段，那么我想优雅地处理这个问题而不是惩罚他们。

注意事项:

• 如果任何输入字段具有焦点，则事件应该发生在该字段，而不是其他地方。
• 不输入字符的按键(Enter、箭头键、PgUp、PgDn...)应保留其默认行为。

使用 jQuery，我想出了这样的东西:

$(document).keypress(function(e) {
  var input = $("#my-input-field");
  if (e.which >= ' ' && !input.is(":focus")) {
    input.focus();
    input.trigger(e);
    e.preventDefault();
  }
});

但是，这不起作用，原因有两个:

1. 即使特定的输入字段处理事件，事件仍然会冒泡到文档。可能的解决方案:
   • 将 keypress 事件处理程序连接到所有输入字段，并在每个输入字段中调用 stopPropagation，但这听起来像是一个等待出错的可怕黑客。
   • 在上面的处理程序中检查输入字段当前是否具有焦点，如果是则忽略它，但这听起来好像我会错过一些其他东西正在使用按键的极端情况。
2. 调用.trigger(e)不起作用。它确实调用了我的自定义事件处理程序，但不会触发实际插入字符的默认按键行为。

最干净的出路是什么？

Answer 1

想一想，事件按以下顺序触发:keydown , keyup , keypress .

你可以使用类似的东西:

$(document.body).on('keydown', function(e) {
    if(document.activeElement.tagName.toLowerCase() != 'input') {
        $('#my-default-input').focus();
    }
});

然后 keydown 事件将完成，稍后它将触发 keyup 事件(在现在聚焦的字段上)，并将字符写入该字段，然后触发其他事件(如果有)绑定(bind)到的 keypress 事件字段可以使用。

可以更改 if 语句的内容以过滤掉某些按键，或添加其他标签，例如 <canvas>到“请勿触摸”列表。

另请注意，我尚未对此进行测试，但理论上它应该有效。 :)