角度 6 中 (keydown) 事件的多个键绑定 [英] Multiple key binding on (keydown) event in angular 6

查看:40
本文介绍了角度 6 中 (keydown) 事件的多个键绑定的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在 angular 6 中使用了 (keydown) 事件来绑定键输入

所以在输入Tab"和Enter"键时,我必须执行我的功能并添加了一个 event.prevent 默认

但是当输入 Shift + Tab 时它也会阻止事件

.html

<input type="text" [(ngModel)]="Result1 (keydown)="onKeydownMain($event)" >

我不想 (keydown.shift.tab) 事件分开..

.ts

public onKeydownMain(event): void {if (event.key === "Enter" || event.key === "Tab") {event.preventDefault();//我的功能在这里}}

<块引用>

但问题是当 Shift + Tab 被按下时,事件被触发并且功能继续,这是我不想要的.

我怎么去这个

我只希望 Shift + Tab 在此输入上执行其默认功能.

解决方案

您需要像这样删除 if 条件中的 shift :

public onKeydownMain(event): void {if (!event.shiftKey && (event.key === "Enter" || event.key === "Tab")){event.preventDefault();//我的功能在这里}}

可以参考https://www.w3schools.com/jsref/obj_keyboardevent.asp 用于 KeyboardEvent

I have used (keydown) event in angular 6 to bind key inputs

So on enter of 'Tab' and 'Enter' key i have to do my functionality and added a event.prevent default

But when Shift + Tab is entered it is also preventing the event

.html

<input type="text" [(ngModel)]="Result1 (keydown)="onKeydownMain($event)"  >

I dont want (keydown.shift.tab) event seperate..

.ts

public onKeydownMain(event): void {
    if (event.key === "Enter" || event.key === "Tab") {
                event.preventDefault();
                   // My Functionality goes here
    }
}

But the problem is when Shift + Tab is pressed , event is fired and functionality goes on, which i don't want.

How can i go this

I just want Shift + Tab to perform its default functionality on this input.

解决方案

You need to remove the shift in the if condition like this:

public onKeydownMain(event): void {
       if (!event.shiftKey && (event.key === "Enter" || event.key === "Tab")){
                event.preventDefault();
                   // My Functionality goes here
        }
    }

You can refer to https://www.w3schools.com/jsref/obj_keyboardevent.asp for KeyboardEvent

这篇关于角度 6 中 (keydown) 事件的多个键绑定的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆