“keyup”或“keydown”上的 Ember Octane 未触发答案

【问题标题】：Ember Octane on 'keyup' or 'keydown' is not firing“keyup”或“keydown”上的 Ember Octane 未触发
【发布时间】：2021-12-11 11:24:07
【问题描述】：

我在这样的 Ember Octane 应用中有一个微光组件

import Component from '@glimmer/component';
import { action } from '@ember/object';


export default class TestComponent extends Component {
  @action
  handleEvent(event) {
    console.log(event);
  }
}

在我的 HTML 中有

<div {{on 'keyup' this.handleEvent}}></div>

但handleEvent 不会触发，例如即使更改为“keyDown”。上面写着documentation

事件可以是任何事件名称，而不仅仅是点击事件，这使得 {{on}} 非常适合处理任何类型的 DOM 事件。有关本机浏览器事件的列表，请参阅 MDN 文档

但这似乎不是真的！

是否有一种“Ember 方式”来处理键盘事件而无需安装外部库（修改器）或者我应该坚持使用本机事件侦听器？

【问题讨论】：

标签： javascript ember.js octane

【解决方案1】：

但这确实有效！见here。

请注意，您需要在 div 上指定 tabindex="0"，因为如果元素无法获得焦点，则不会触发 keyup。

【讨论】：

Lux 的建议是正确的。从技术上讲，我们需要以编程方式聚焦div，以便触发key 事件。