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

Question

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

如果按下的键将在文本输入字段中键入一个字符,并且该按键尚未在其他地方处理(例如,没有输入字段具有焦点),则关注一个特定的输入字段并在那里键入字符.

这是为了在需要快速响应的浏览器游戏中为用户节省鼠标点击,但它同样可以用在聊天应用程序中.如果用户意外忘记关注这个(大而明显的)输入字段,那么我想优雅地处理它而不是惩罚它们.

注意事项:

• 如果任何输入字段具有焦点,则事件应该去那里而不是其他地方.
• 不应键入字符的键(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. document即使特定的输入字段处理事件,事件仍会冒泡.可能的解决方案:
   • 将keypress事件处理程序连接到所有输入字段并调用stopPropagation每个输入字段,但这听起来像是一个可怕的黑客等待出错.
   • 在上面的处理程序中检查输入字段当前是否具有焦点,如果是,则忽略它,但这听起来像我会遗漏一些其他东西使用按键的角落情况.
2. 通话.trigger(e)无效.它确实调用我的自定义事件处理程序,但不会触发keypress实际插入字符的defaut 行为.

什么是最干净的出路？

Answer 1

关于它的思考,事件触发顺序如下:keydown,keyup,keypress.

您可以使用以下内容:

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

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

可以更改if语句的内容以过滤掉某些按键,或者添加其他标记,例如<canvas>"不要触摸"列表.

另请注意,我没有对此进行测试,但理论上应该可行.:)