在 Angular 5 TypeScript 中触发 keyup 事件

Posted 2023-03-13

【中文标题】在 Angular 5 TypeScript 中触发 keyup 事件

【英文标题】：Trigger keyup event in Angular 5 TypeScript

【发布时间】：2019-03-08 15:50:26

【问题描述】：

我们使用 javascript/jQuery 以编程方式轻松触发了按键/向下/向上事件。

$(function() 
    $('item').keydown();
    $('item').keypress();
    $('item').keyup();
    $('item').blur();
);

但是使用 Angular 5 和 TypeScript，我们怎么能做到呢？

//I am setting value programmatically -> working
document.getElementById('custom_Credit').setAttribute('value', coinsToBuy);    
//setting focus -> working
document.getElementById('custom_Credit').focus();
//but there are no way to generate or trigger keypress/up events.
document.getElementById('custom_Credit')..........;

【问题讨论】：

使用Document API 直接访问 DOM 不是一个好习惯。也不建议使用 jQuery。 Angular 有它自己的方式来做到这一点。请改用(click) 事件。像这样<div (click)="eventHandler()"></div>

你可以让事件直接写在元素上吗？

@SiddAjmera 由于输入具有KeyUp 事件的活动，所以我想触发它​​。我知道，我可以调用(click) 并调用KeyUp 调用的那个函数。请让我知道是否有办法调用它。

【参考方案1】：

在您的 app.component.html 文件中，在 DOM 元素上定义事件

<input (keyup)="onKeyup($event)" (keydown)="onKeydown($event)" #userName></input>

在您的 app.component.ts 文件中，获取元素 ref 并调度事件，同时为相同的事件创建事件处理程序

export class AppComponent 
 @ViewChild('userName') userInput: ElementRef;
 constructor() 


someFunction()
  let event = new KeyboardEvent('keyup','bubbles':true);
  this.userInput.nativeElement.dispatchEvent(event);


 onKeyup(event)
   console.log(event)
 

 onKeydown(event)
   console.log(event)
 

【讨论】：

该事件已绑定。但从另一个角度来看，我想以编程方式触发 (keyup) 事件。

IE 不支持KeyboardEvent 构造函数

【参考方案2】：

如果你想在 HTML 中监听 Angular 事件，你可以这样做：

<button (click)="eventHandler($event)">

在组件的 TypeScript 类中，您有自己的方法：

eventHandler(event)
  console.log(event);

这是最常见的方式。

您还可以在 Angular 中获取元素引用。首先在元素上添加#value：

<button #myButton>

#MyButton 语法允许您使用 @ViewChild 元数据在代码中引用子项：

@ViewChild('myButton')
myButton: ElementRef;

那么你应该可以调用原生元素上的方法了：

myButton.nativeElement.keydown();
myButton.nativeElement.keypress();
myButton.nativeElement.keyup();
myButton.nativeElement.blur();

我还没有实际测试过，因为在 Angular 中很少尝试访问底层 DOM 事件，而不是使用 Angular 对它们的封装。

【讨论】：

得到Uncaught TypeError: ...nativeElement.keyup is not a function

那个语法看起来不对；所以也许你需要类似keyup.addEventListener('keyup', handlerfunction);

好，谢谢

【参考方案3】：

这与 javascript 与 typescript 无关。打字稿基本相同。区别在于 jQuery 与 Angular。

用 id 标记您的按钮，以便我们可以从组件中访问它。

<button #submitButton ...>

在您的组件中，您可以使用 ViewChild 装饰器来访问此元素。

export class FooComponent 
    @ViewChild('submitButton')
    submitButtonRef: ElementRef;

    emitClick() 
         // ...
    

然后要触发点击，您可以执行以下操作：

emitClick() 
    this.submitButtonRef.nativeElement.click();

请确保您没有提前调用 emitClick。如果我没记错的话，ViewRef 仅在 AfterViewInit 角度生命周期事件之后可用。

这也应该适用于焦点。其他事件可能有点棘手，但你有原生 dom 元素，所以基本上你只需要找出如何在没有 jquery 的原生 dom 元素上触发所需的事件。如果你需要，你可以参考这个答案：trigger custom event without jQuery