Mithril.js组件创建时绑定onkeydown事件无响应问题求助

你的代码里div元素默认不具备焦点能力，键盘事件只会触发在拥有焦点的元素上，所以即使绑定了onkeydown也不会生效。以下是几种可行的解决方式：

1. 给div添加tabindex属性使其可聚焦 #

通过给div设置tabindex属性，让它能够被聚焦，这样键盘事件就能触发：

var KeyboardComponent = {
     parse: function(e){
       console.log("pressed: " + e.key);
     },
     view: function() {
        // tabindex: 0 允许通过Tab键聚焦，tabindex: -1 仅支持点击/JS聚焦（不会被Tab选中）
        return m("div.keyboard-container", {onkeydown: (e) => this.parse(e), tabindex: 0});
     }
};

m.mount(document.body, KeyboardComponent);

使用时需要先点击div使其获得焦点，之后按键就能触发事件。

2. 监听全局键盘事件 #

如果需要监听全局范围内的键盘操作，可以在组件的生命周期钩子中绑定/解绑document的键盘事件，避免内存泄漏：

var KeyboardComponent = {
     parse: function(e){
       console.log("pressed: " + e.key);
     },
     oninit: function() {
       document.addEventListener("keydown", this.parse);
     },
     onremove: function() {
       document.removeEventListener("keydown", this.parse);
     },
     view: function() {
        return m("div.keyboard-container");
     }
};

m.mount(document.body, KeyboardComponent);

3. 使用原生可聚焦元素（如input） #

如果你的场景是输入操作，直接使用input等原生可聚焦元素更合理，无需额外配置就能触发键盘事件：

var KeyboardComponent = {
     parse: function(e){
       console.log("pressed: " + e.key);
     },
     view: function() {
        return m("input.keyboard-input", {onkeydown: (e) => this.parse(e)});
     }
};

m.mount(document.body, KeyboardComponent);

内容的提问来源于stack exchange，提问作者happy songs