Trigger keyup event in Angular 5 TypeScript

问题

We have triggered keypress/down/up events programmatically easily with JavaScript/jQuery.

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

But with Angular 5 and TypeScript, how can we do that?

//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')..........;

回答1:

In your app.component.html file, define events on DOM elements

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

In your app.component.ts file , get element ref and dispatch an event, also make event handlers for the same

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)
 }

}

回答2:

If you want to listen to an Angular event in HTML, you can do so like this:

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

Inside your component's TypeScript class, you have your method:

eventHandler(event){
  console.log(event);
}

That is the most common way.

You can also get an element reference in Angular. Start by adding the #value on the element:

<button #myButton>

The #MyButton syntax allows you to reference the child in code using the @ViewChild metadata:

@ViewChild('myButton')
myButton: ElementRef;

Then you should be able to call the methods on the native element:

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

I haven't actually tested this, as it is rare in Angular to try to access the underlying DOM events as opposed to using Angular's encapsulation of them.

回答3:

This has nothing to do with javascript vs typescript. Typescript is basically the same. The distinction is rather jQuery vs angular.

Mark your button with an id, so we can access it from the component.

<button #submitButton ...>

In your component you can use a ViewChild decorator to access this element.

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

    emitClick() {
         // ...
    }
}

Then to trigger the click you can do following:

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

Just make sure that you don't call emitClick to early. ViewRef is only available after the AfterViewInit angular lifecycle event if I'm not mistaken.

This should also work for focus. Other events might be a bit trickier, but you have the native dom element, so basically you just need to find out how to trigger the desired event on a native dom element without jquery. If you need that you could refer to this answer: trigger custom event without jQuery

来源：https://stackoverflow.com/questions/52626631/trigger-keyup-event-in-angular-5-typescript

标签

angular

typescript

angular5