contenteditable 内组件中的键盘事件绑定答案

【问题标题】：keyboard events binding in component within contenteditablecontenteditable 内组件中的键盘事件绑定
【发布时间】：2017-07-18 21:39:45
【问题描述】：

我尝试在 div[contenteditable=true] 内的组件上监听键盘事件。为什么它不工作？

请http://plnkr.co/edit/Tjmihqc1r5UrS3XJ3QQ0?p=preview

模板：

<div contenteditable="true"> <h2 (keydown)="log($event)" (keyup)="log($event)" (keypress)="log($event)" (click)="log($event)">Hello {{name}}</h2> </div>

点击 - 工作

keydown、keyup、keypress - 不起作用

更新：我发现这个问题不适用于 angular 2 其内容可编辑相关Keypress event on nested content editable (jQuery)

【问题讨论】：

标签： angular contenteditable keyboard-events

【解决方案1】：

试试这个：

@Component({
  selector: 'my-app',
  template: `
  <div contenteditable="true" (keyup)="onKey($event)"> 
    <h2>Hello {{values}}</h2>
  </div>
  `,
})

在你的 component.ts 中

export class App {
  name:string;
  log = [];
  values = '';
  constructor() {
    this.name = 'Angular2'
  }

  onKey(event: any) { 
    console.log(event);
    this.values += event.key + ' | ';
  }
}

根据 Angular2 文档，您需要使用 Keyup 而不是 Keydown Get User input from $event

Plunkr Example

【讨论】：

在我的情况下，keyup、keydown、keypress 之间没有区别。这些都不起作用
@ШлыковСергей 刚刚在我的回答中添加了一个 plunkr 示例。
这不是我想要做的。目标是绑定到 contenteditable 的 child 组件。不要内容可编辑本身。
好的，根据您刚才所说，我已经更新了答案和 plunkr。
我希望 event.target 是 h2 而不是 div。我可以通过在 h2 元素上监听键盘事件来使用纯 javascript 来做到这一点。但是，由于某种原因，我不能用 angular 2 模板语法重复它

【解决方案2】：

我更新了我的问题。简而言之 - angular 2 按预期工作。

与 contenteditable 本身相关的问题。

而且你不能在 contenteditable 的子元素上监听键盘事件。

Keypress event on nested content editable (jQuery) 中发现的可能解决方法

【讨论】：