如何在 Angular 中将特定按键绑定到 keyup 和 keydown 事件

简介

当在 Angular 2+ 模板中绑定 keyupkeydown 事件时,可以指定 键名。这将应用一个过滤器,只有在按下特定键时才会触发事件。

在本文中,您将学习如何在监听 keyupkeydown 事件时使用键名。

使用键名

首先,让我们看一个不使用键名的示例。

假设我们有一个 <input> 元素供用户提供信息。我们希望在用户按下 ENTER 键时记录到控制台:

<input (keydown)="onKeydown($event)">

我们绑定了一个 keydown 事件处理程序,触发 onKeydown()

接下来,让我们编写 onKeydown() 函数来处理按下 ENTER 键:

onKeydown(event) {if (event.key === "Enter") {console.log(event);}
}

在每个 keydown 事件上执行检查,以确定 event.key 的值是否为 Enter。如果为 true,我们将 event 记录到控制台。

现在是相同的示例,但添加了 ENTER 键名到事件中:

<input (keydown.enter)="onKeydown($event)">

我们绑定了一个 keydown.enter 伪事件 处理程序,触发 onKeydown()

接下来,让我们重写 onKeydown() 函数:

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

通过依赖 Angular 的 keydown.enter 伪事件,不再需要手动检查 event.key 的值是否为 Enter

使用特殊修饰键和组合键

此功能适用于特殊和修饰键,如 ENTERESCSHIFTALTTABBACKSPACE 和命令 (meta):

键名键名
ENTER<input (keydown.enter)="...">
ESC<input (keydown.esc)="...">
ALT<input (keydown.alt)="...">
TAB<input (keydown.tab)="...">
BACKSPACE<input (keydown.backspace)="...">
CONTROL<input (keydown.control)="...">
COMMAND<input (keydown.meta)="...">

但它也适用于字母、数字、箭头和功能键 (F1F12):

键名键名
A<input (keydown.a)="...">
9<input (keydown.9)="...">
ARROWUP<input (keydown.arrowup)="...">
F4<input (keydown.f4)="...">

以下是 Angular 能够过滤的键值的完整列表。

您还可以将键组合在一起,只有在触发键组合时才触发事件。在下面的示例中,只有同时按下 CONTROL1 键时事件才会触发:

<input (keyup.control.1)="onKeydown($event)">

以下是更多示例,让您了解可能的情况:

键名键名
SHIFT+ESC<input (keydown.shift.esc)="...">
SHIFT+ARROWDOWN<input (keydown.shift.arrowdown)="...">
SHIFT+CONTROL+Z<input (keydown.shift.control.z)="...">

结论

您已经学会了 Angular 2+ 模板如何支持使用 keyupkeydown 伪事件过滤键名。

这种方法的好处包括减少手动检查键值和处理修饰键和非修饰键组合的重复性。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/683776.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python 装饰器的学习笔记

Python 装饰器的学习笔记 0. Python 装饰器的说明1. 装饰器的基本结构2. 使用装饰器3. 带参数的装饰器4. 类装饰器 0. Python 装饰器的说明 装饰器是Python中一个非常强大的功能&#xff0c;它允许程序员扩展或修改函数的行为而不改变函数本身的代码。装饰器本质上是一个接受函…

Python dict函数

Python中的字典&#xff08;dict&#xff09;是一种非常重要且灵活的数据结构&#xff0c;它提供了键值对的存储和访问机制。字典函数&#xff08;dict()&#xff09;作为创建字典的工具之一&#xff0c;可以从多种数据结构中创建字典对象。在本文中&#xff0c;将深入探讨dict…

2.15数据结构与算法学习日记(分治,二分)

洛谷P1296 奶牛的耳语 题目描述 在你的养牛场&#xff0c;所有的奶牛都养在一排呈直线的牛栏中。一共有 &#xfffd;n 头奶牛&#xff0c;其中第 &#xfffd;i 头牛在直线上所处的位置可以用一个整数坐标 &#xfffd;&#xfffd;(0≤&#xfffd;&#xfffd;≤108)pi​(…

算法刷题:有效三角形个数

有效三角形个数 .题目链接题目详情算法原理补充知识点双指针:对撞指针 我的答案 . 题目链接 有效三角形个数 题目详情 算法原理 补充知识点 有效三角形需要满足的条件: ab>cac>bbc>a 其实在满足1的时候,c是最大的,那么2和3是显然成立的,因此我们可以这样解题: 对…

华为OD机试 - 分配土地( Python C C++ JavaGo JS PHP)

题目描述 从前有个村庄&#xff0c;村民们在各种田地上插上小旗子&#xff0c;每个旗子上都标识了一个数字。现在&#xff0c;村民们想要找出一个包含相同数字的最小矩形区域&#xff0c;并将这块土地分配给对村庄做出巨大贡献的村民。我们需要找出这个矩形区域的最大面积。 …

知识图谱简单介绍

知识图谱&#xff08;Knowledge Graph&#xff09;是一种用于表达实体、概念及其之间关系的图形数据结构。它通过将现实世界中的各种概念、实体和关系以图形的形式组织起来&#xff0c;实现对知识的表示、存储和推理。知识图谱在许多领域都有广泛的应用&#xff0c;如搜索引擎、…

分享个CSDN自定义模块模板

在开了会员或升级为博客专家后&#xff0c;才有这个自定义模块的权限 当然这也是为了有很多粉丝的博主更方便的推广一些业务场景展示的橱窗 自定义模块管理 下面就列下我使用的自定义模块相关的代码 <marquee><b><font color"#8A2BE2">不</…

[WinForm开源]概率计算器 - Genshin Impact(V1.0)

创作目的&#xff1a;为方便旅行者估算自己拥有的纠缠之缘能否达到自己的目的&#xff0c;作者使用C#开发了一款小型软件供旅行者参考使用。 创作说明&#xff1a;此软件所涉及到的一切概率与规则完全按照游戏《原神》(V4.4.0)内公示的概率与规则&#xff08;包括保底机制&…

代码随想录 -- 数组

文章目录 二分查找题目描述题解 移除元素题目描述题解&#xff1a;暴力解法题解&#xff1a;双指针法 有序数组的平方题目描述题解&#xff1a;暴力解法题解&#xff1a;双指针法 长度最小的子数组题目描述题解&#xff1a;暴力解法题解&#xff1a;滑动窗口&#xff08;双指针…

猫头虎分享已解决Bug || DNS解析问题(DNS Resolution Issue):DNSLookupFailure, DNSResolveError

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

学习Spring的第十八天

注解方式配值声明式事务控制 直接上源码配置类 package com.itheima.config;import com.alibaba.druid.pool.DruidDataSource; import org.mybatis.spring.SqlSessionFactoryBean; import org.mybatis.spring.annotation.MapperScan; import org.springframework.beans.facto…

作业2.12

1.会出现段错误&#xff0c;因为p申请的堆区内存未返回给str&#xff0c;导致str仍然指向NULL&#xff0c;无法将"hello world"拷贝给str 2.会出现段错误&#xff0c;因为p是一个局部变量&#xff0c;函数结束时&#xff0c;p将被释放&#xff0c;不能返回它的地址&…

大学生必备搜题软件推荐?找题不再难!好用的大学搜题工具推荐 #媒体#职场发展

在快节奏的大学生活中&#xff0c;合理利用这些日常学习工具&#xff0c;能够让你事半功倍&#xff0c;提高学习效率。 1.茱莉亚公开课 茱莉亚公开课APP不是一款针对所有人的应用&#xff0c;是针对对艺术有特殊爱好和艺术领域的人 茱莉亚音乐学院里面都是世界著名的茱莉亚音…

Vulhub kali 环境安装教程

进入 root 权限 sudo su 更新软件 apt-get update 安装 HTTPS 协议和 CA 证书 apt-get install -y apt-transport-https ca-certificates 安装 docker apt install docker.io 查看 docker 是否安装完成 docker -v 安装 pip apt-get install python3-pip 安装 docker-compose do…

vivado Latches、Tristates、

闩锁 Vivado日志文件报告已识别闩锁的类型和大小。 推断锁存通常是HDL编码错误的结果&#xff0c;例如不完整的if或case声明。 Vivado synthesis针对以下报告示例中显示的实例发出警告。此警告允许您验证推断的Latch功能是否为预期功能。 Latches Reporting Example * Vi…

Linux第57步_“linux系统镜像”和“根文件系统”重新打包小结

实时总结是很重要的&#xff0c;时间久了&#xff0c;可能会遗忘。下面是“linux系统镜像”和“根文件系统”重新打包小结。 1、linux系统镜像重新打包 在第1次完成linux系统镜像打包后&#xff0c;再重新打包就很容易了 将“bootfs”重新打包 准备打包文件: 输入“cd /ho…

Spark中多分区写文件前可以不排序么

背景 Spark 3.5.0 目前 Spark中的实现中&#xff0c;对于多分区的写入默认会先排序&#xff0c;这是没必要的。可以设置spark.sql.maxConcurrentOutputFileWriters 为大于0来避免排序。 分析 这部分主要分为三个部分: 一个是V1Writes规则的重改; 另一个是FileFormatWriter中…

(10)Hive的相关概念——文件格式和数据压缩

目录 一、文件格式 1.1 列式存储和行式存储 1.1.1 行存储的特点 1.1.2 列存储的特点 1.2 TextFile 1.3 SequenceFile 1.4 Parquet 1.5 ORC 二、数据压缩 2.1 数据压缩-概述 2.1.1 压缩的优点 2.1.2 压缩的缺点 2.2 Hive中压缩配置 2.2.1 开启Map输出阶段压缩&…

MySQL篇之回表查询

一、聚集索引 将数据存储与索引放到了一块&#xff0c;索引结构的叶子节点保存了行数据。特点&#xff1a;必须有,而且只有一个。 聚集索引选取规则: 1. 如果存在主键&#xff0c;主键索引就是聚集索引。 2. 如果不存在主键&#xff0c;将使用第一个唯一&#xff08;UNIQUE&am…

Linux环境中的git

目录 1.要使用git&#xff0c;首先要安装git 2.首次使用git需要做的操作 3.git操作 1.要使用git&#xff0c;首先要安装git 指令&#xff1a;sudo yum install -y git 2.首次使用git需要做的操作 在gitee网页&#xff0c;在你的仓库中找到&#xff1a; 先将下面两行代码分别…