如何处理流星中的关键事件？答案

【问题标题】：How can I handle key events in meteor?如何处理流星中的关键事件？
【发布时间】：2016-05-05 23:48:21
【问题描述】：

根据文档，我应该能够像处理 click 事件一样处理像 keypress 这样的关键事件，但我觉得我错过了一些东西。

我做了以下事情：

> meteor create keypressTest
> cd keypressTest
> sed -e 's/click input/keypress body/' -i .bak keypressTest.js
> meteor

但是当我按下按键时，控制台中并没有像处理点击事件时那样显示任何内容。

有没有在流星中处理密钥的例子？我知道我可以在 jquery 中解决问题，但如果可以的话，我更愿意坚持使用干净的模板事件。

【问题讨论】：

标签： meteor

【解决方案1】：

请注意keypress is deprecated，您可能想改用textinput。

但我确实注意到 keydown 和 keyup 并未被弃用，因此使用其中之一可能比使用 keypress 更可靠。请注意，文档指定了顺序：

keydown
keypress
keyup

如果你想对媒体采取行动，你可以使用keydown；如果您想对电梯采取行动，请使用keyup。我更喜欢后者，因为它仍然允许您通过在解除按键之前切换到另一个应用程序来取消按键...

【讨论】：

我看到与 keydown 和 keyup 相同的行为（或缺乏行为）。我在 Safari、Firefox 和 Chrome 中进行了测试。
从您链接到的文档中：“textInput 事件，最初被提议作为 keypress 的替代品，已被删除以支持当前的 beforeinput 和 input 事件。”
正如@user456584 所说，这里最好的选择似乎是input 事件，因为它不仅会在按下键时立即触发，而且会在文本字段中提供实际数据之后触发（这可能很重要）。

【解决方案2】：

我可以找到我的“按键”事件

Template.myTemplate.events({
    'keypress input': function(e) { console.log('key', e); }
});

或者在一个更有用的例子中

Template.myTemplate.events({
      'keyup input': function(event) {
      if (event.which === 13) {
         alert('you hit enter');
         event.stopPropagation();
         return false;
      }
   },
    ...

@tom，我在 textinput 上没有得到任何信息 :(

【讨论】：

这工作除了event.charCode 总是返回0。我需要使用event.keyCode。

【解决方案3】：

我错过了在事件映射中使用关键事件的这两个要求：

事件目标必须包含在模板中（与其他事件相同）
事件目标必须是可以输入的输入元素

第二点似乎与单击一致，因为 click * 仅在单击按钮时触发，而不是在模板中包含的问候文本上。

【讨论】：

【解决方案4】：

Enter 将返回一个event.charCode = 0，而不是使用event.keyCode 这将返回 13。

'keypress input': function(event) {
    if (event.keyCode == 13) {
        alert('you hit enter');
        event.stopPropagation();
        return false;
    }
}

【讨论】：