键盘事件绑定在contenteditable中的组件-Java 学习之路

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

plunk 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 - 不行

更新：我发现问题不适用于角度2其满足的相关性Keypress event on nested content editable (jQuery)

2 回答

试试这个：

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

在你的组件里面

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

回复于 2024-04-28T18:37:16+08:00

0

我更新了我的问题 . 在短 - 角2工作如预期 .

与contenteditable本身有关的问题 .

而且你不能在满足的儿童元素上听键盘事件 .

在Keypress event on nested content editable (jQuery)注意到的可行的解决方法

回复于 2024-04-28T18:37:16+08:00

键盘事件绑定在contenteditable中的组件

2 回答

相关问题