Angular使用keydown监听tab键事件处理

选中文字可对指定文章内容进行评论啦,→和←可快速切换按钮,绿色背景文字可以点击查看评论额。

在html中,在焦点元素上按下tab键,它会跳到下一个可聚焦元素(按钮、输入等)。如果监听的是keyup,当按下tab放开时,焦点元素已经变为下一个可聚焦元素。在前面的焦点元素上做监听keyup是不会触发事件的处理handler的。

为了避免焦点元素的变化这个问题,可以使用keydown监听tab键

Angular监听tab键示例

示例:

<input (keydown.Tab)="onKey($event)">

上面示例中可以正常调用tab键事件处理onKey函数。

禁止Tab默认的切换焦点元素行为

默认情况下tab键会跳到下一个可聚焦的元素,如果要禁止此默认行为,在监听处理上返回false。

代码如下:

<input (keydown.Tab)="onKey($event);false">

 

版权声明:著作权归作者所有。

相关推荐

JavaScript监控元素外的点击事件隐藏元素

监控document的点击事件,使用jquery的closet排除指定元素以及其子元素的点击事件。function hideOnClickOutside(selector) {   $(document).on('click',function(event){     if (!$(event.target)

Git使用mergetool处理合并冲突

Git做合并时难免会发生冲突,发生冲突我们可以使用git的mergetool来处理。在使用mergetool前需要先了解下Git用于处理冲突的几个概念:LOCAL - 本机在当前分支下文件的headREMOTE - 在远程将要合并到LOCAL当前分支的headBASE - the common ancestor(s) of LOCAL a

Kotlin使用kotlin-kapt插件支持Android的注解处理

在Kotlin可以使用kapt插件来支持Android的注解处理。在Gradle配置kotlin-kapt插件如下:在app的build.gradle添加插件apply plugin: 'kotlin-kapt' 使用kapt添加注解依赖java使用annotationProcessor 添加的依赖改为使用kapt。例如添加dagger依赖dependencies {

Angular4 监听路由URL的变化

Angular 4检测路由变化,可以使用router.events来监听:支持的事件类型:NavigationStart:导航开始NavigationEnd:导航结束NavigationCancel:取消导航NavigationError:导航出错RoutesRecoginzed:路由已认证在判断事件类型需要导入对应的事件类型,如:import { Router,&n

Axios使用拦截器全局处理请求重试

Axios拦截器Axios提供了拦截器的接口,让我们能够全局处理请求和响应。Axios拦截器会在Promise的then和catch调用前拦截到。请求拦截示例axios.interceptors.request.use(function (config) {     // 在发起请求请做一些业务处理   &n

RecyclerView添加点击事件监听器

实现RecyclerView.OnItemTouchListener的项目触摸监听器:import android.content.Context; import android.support.v7.widget.RecyclerView; import android.view.GestureDetector; import android.view.M

Objective-C的异常处理

异常:当程序执行时,发生的某种特殊状况,打断了正常的运转流程。Objective-C 的异常处理语法与Java和C++类似。通过使用 NSException, NSError 以及自定义的异常处理类来处理这些异常。Objective-C 对异常的支持包括四个编译器指令: @try、@catch、@throw 以及 @finally。使用规则:如果这句或这部分代码有可能出现问题,就把它放在@try{

Python 文件处理

文件处理读写文件读取文件1 文件在程序文件目录 或者目录下的文件夹使用相对路径打开文件2 文件在其他文件夹 提供绝对路径c:\Users\ehmatthes\other_files#### 2 read.read():读取文件内容 储存字符串在变量中.readlines(): 读取每一行,储存在列表里储存在别的变量下 可在with调用文件语句外 使用#### 3 with```pythonwit