I have following html code, I need to identify whether the event is mouse click event or keyboard enter key event.
Html code
<button mat-raised-button class="btn-enter-troubleshooting-attempts"
(click)="triggerLog($event)"> Click/Enter </button>
Type script
triggerLog(e): void {
console.log('Log Attempt', e);
//do some function based on the event
}
You can add (keydown)="triggerLog($event)" and then check if the Enter key is pressed in app.component.ts:
triggerLog(e): void {
console.log('Log Attempt', e);
if(e.code === 13) {
// Enter pressed.
}
}
If you want to listen to keypress or keydown with no selection:
ngOnInit(): void {
window.addEventListener('keydown', this.triggerLog, true);
}
You can check keyboard codes at https://keycode.info/.
(keypress) then mouse click is not working, then how to handle that situation
keypress and e.keyCode are depreacted, so you should probably be using e.key or e.code instead. Also, this line is wrong: e.code === 13. You have 4 alternatives there: e.key === 'Enter', e.code === 'Ender', e.which === 13 (deprecated) or e.keyCode === 13 (deprecated).Use (keyup.enter) to bind to enter key. Use (click) to listen to mouse clicks.
Check this link
(click)="triggerLog($event)" (keyup.enter) = "triggerLog($event)" i need to use both together
you only need ask about event.clientX, if has any value is a click, else is an ENTER
<form [formGroup]="form">
<input formControlName="name">
<button type="submit" (click)="triggerLog($event)">click</button>
</form>
form=new FormGroup({
name:new FormControl('')
})
triggerLog(event)
{
console.log(event.clientX)
}
