Angular2 中的 (keyup) 都有哪些选项？

Posted 2023-02-22

【中文标题】Angular2 中的 (keyup) 都有哪些选项？

【英文标题】：What are the options for (keyup) in Angular2?Angular2 中的 (keyup) 有哪些选项？

【发布时间】：2015-11-16 07:37:12

【问题描述】：

当 enter 键被释放时，下面的效果很好。 除了keyup.enter，keyup 还有哪些其他选项？

<input #inputstring (keyup.enter)="doSomething(inputstring.value)"/>

【问题讨论】：

也许这可以给你一个提示github.com/angular/angular/issues/523，不过它已经很老了。

【参考方案1】：

这些是当前在测试中记录的选项：ctrl、shift、enter 和 escape。以下是一些有效的键绑定示例：

keydown.control.shift.enter
keydown.control.esc

您可以在没有官方文档的情况下跟踪此here，但它们应该很快就会发布。

【讨论】：

哇，这个答案是在 Angular 的第 20 个 Alpha 版时给出的，它今天仍然有效。

相关文档angular.io/guide/user-input#key-event-filtering-with-keyenter

New link for Angular 9

这在今天仍然适用于 Angular 12，但需要注意的是，对于多键组合，顺序很重要。 keydown.shift.enter 有效，但 keydown.enter.shift 无效。

【参考方案2】：

我正在寻找一种绑定到多个关键事件的方法 - 特别是 Shift+Enter - 但在网上找不到任何好的资源。但是在记录 keydown 绑定之后

<textarea (keydown)="onKeydownEvent($event)"></textarea>

我发现键盘事件提供了检测 Shift+Enter 所需的所有信息。原来$event 返回了一个相当详细的KeyboardEvent。

onKeydownEvent(event: KeyboardEvent): void 
   if (event.keyCode === 13 && event.shiftKey) 
       // On 'Shift+Enter' do this.......
   

还有 CtrlKey、AltKey 和 MetaKey（即 Mac 上的 Command 键）的标志。

不需要 KeyEventsPlugin、JQuery 或纯 JS 绑定。

【参考方案3】：

今天遇到了同样的问题。

这些文档记录不充分，存在一个未解决的问题。

一些用于keyup，比如空格：

<input (keyup.space)="doSomething()">
<input (keyup.spacebar)="doSomething()">  

一些用于 keydown （也可能适用于 keyup）：

<input (keydown.enter)="...">
<input (keydown.a)="...">
<input (keydown.esc)="...">
<input (keydown.alt)="...">
<input (keydown.shift.esc)="...">
<input (keydown.shift.arrowdown)="...">
<input (keydown.f4)="...">

以上内容均来自以下链接：

https://github.com/angular/angular/issues/18870https://github.com/angular/angular/issues/8273https://github.com/angular/angular/blob/master/packages/platform-browser/src/dom/events/key_events.tshttps://alligator.io/angular/binding-keyup-keydown-events/

【参考方案4】：

这个文件给你更多的提示，比如keydown.up不工作你需要keydown.arrowup：

https://github.com/angular/angular/blob/630d93150a58581a0d474ebf1befb5d09b6813c5/modules/angular2/src/platform/browser/browser_adapter.dart

【参考方案5】：

你可以像这样添加keyup事件

template: `
  <input (keyup)="onKey($event)">
  <p>values</p>
`

在组件中，代码如下所示

export class KeyUpComponent_v1 
  values = '';

  onKey(event:any)  // without type info
    this.values += event.target.value + ' | ';
  

【讨论】：

这不适用于数字。如果我在输入字段中键入数字，则不会触发 keyup 事件。我们能做些什么呢？

【参考方案6】：

keyCode 已弃用，您可以在KeyboardEvent 中使用key 属性

<textarea (keydown)=onKeydownEvent($event)></textarea>

打字稿：

onKeydownEvent($event: KeyboardEvent)

    // you can use the following for checkig enter key pressed or not
    if ($event.key === 'Enter') 
      console.log($event.key); // Enter
    


    if ($event.key === 'Enter' && event.shiftKey) 
           //This is 'Shift+Enter' 
    

【参考方案7】：

如果您的 keyup 事件在 CTRL、SHIFT、ENTER 和 ESC 括号之外，只需使用 @ Md Ayub Ali Sarker 的指南。角度文档https://angular.io/docs/ts/latest/guide/user-input.html 中提到的唯一 keyup 伪事件是 ENTER 键。目前还没有数字键和字母的 keyup 伪事件。

【讨论】：

对不起，罗伯特。使用该链接导航到 Angular 文档时我没有任何问题。它有效。

是的，现在可以使用了。可能问题就在我这边。对不起。

【参考方案8】：

一个喜欢的事件

(keydown)="$event.keyCode != 32 ? $event:$event.preventDefault()"