angular 键盘事件绑定与过滤
方便的angular按钮绑定
如
<input (keyup.enter)="keyUpSearch($event)" value="按下回车键触发">
<input (keyup.;)="keyUpSearch($event)" value="按下;号键触发">
官方文档:https://www.angular.cn/guide/user-input#key-event-filtering-with-keyenter
(keyup) 事件处理器监听每一次按键。 有时只在意回车键,因为它标志着用户结束输入。 解决这个问题的一种方法是检查每个 $event.keyCode,只有键值是回车键时才采取行动。
更简单的方法是:绑定到 Angular 的 keyup.enter 模拟事件。 然后,只有当用户敲回车键时,Angular 才会调用事件处理器。
示例:
template:
<input #box (keyup.enter)="update(box.value, $event)" (blur)="update(box.value)">
component:
@Component({
selector: 'app-key-up4',
})
export class KeyUpComponent_v4 {
value = '';
update(value: string, event: any) { this.value = value; }
}
常用的过滤有
(keyup.enter) // 按键并回车
(keyup.space) // 按键并空格
(keyup.control) // 按键并ctrl
(keyup.shift) // 按键并shift
(keyup.alt) // 按键并alt
(keyup.1) // 按键1触发
(keyup.,) // 按键,触发
(keyup.3) // 按键并alt
不支持一些具有正则含义的符号,
如 / ? * 等
angular 键盘事件绑定与过滤的更多相关文章
- 捕获enter键盘事件绑定到登录按钮
/** *捕获enter键盘事件绑定到登录按钮 */ function keyLogin(event) { if (event.keyCode == 13) { document.getElement ...
- jQuery键盘事件绑定Enter键
<script> $(function(){ $(document).keydown(function(event){ if(event.keyCode==13){ $("#mo ...
- 前端(十五)—— JavaScript事件:绑定事件方式、事件的冒泡和默认事件、鼠标事件、键盘事件、表单 事件、文档事件、图片事件、页面事件
JS事件:绑定事件方式.事件的冒泡和默认事件.鼠标事件.键盘事件.表单 事件.文档事件.图片事件.页面事件 一.事件的两种绑定方式 1.on事件绑定方式 document.onclick = func ...
- JavaFX桌面应用开发-鼠标事件和键盘事件
鼠标相关事件的操作初始代码 package application; import javafx.application.Application;import javafx.event.ActionE ...
- vue学习笔记(一)关于事件冒泡和键盘事件 以及与Angular的区别
一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...
- 【Angular 5】数据绑定、事件绑定和双向绑定
本文为Angular5的学习笔记,IDE使用Visual Studio Code,内容是关于数据绑定,包括Property Binding.Class Binding.Style Binding. 在 ...
- 关于事件冒泡和键盘事件 以及与Angular的区别
一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...
- Dojo初探之4:dojo的event(鼠标/键盘)事件绑定操作(基于dojo1.11.2版本)
前言: 上一章详解了dojo的dom/query操作,本章基于dom/query基础上进行事件绑定操作 dojo的事件 dojo的事件绑定操作分为鼠标和键盘两种进行详解 1.鼠标事件 我们沿用上一章中 ...
- angular,vue,react的基本语法—动态属性、事件绑定、ref,angular组件创建方式
基本语法: 动态属性: vue: v-bind:attr="msg" :attr="msg" react: attr={msg} angular [attr]= ...
随机推荐
- python-web自动化-Js-日历操作
日历控件是web网站上经常会遇到的一个场景,有些输入框是可以直接输入日期的,有些不能:以12306网站为例,讲解如何解决日历控件为readonly属性的问题. 基本思路:先用js去掉readonly属 ...
- Android开发 静态static类与static方法持有Context是否导致内存泄露的疑问
简述 在Android开发的过程中,难免会使用单例模式或者静态方法工具类.我们会让它们持有一些外部的Context或者View一般有以下几种情况: 单例模式,类的全局变量持有Context 或 Vie ...
- Spring3.2.0 之后各个版本完整包下载地址
留作工作学习使用 现在Spring官网已经很难找到完整包的下载地址,都已经迁移到Maven上,这给不能用Maven或者不愿用Maven的各位带来了不小的麻烦. 经过挖掘,找到了下载3.2之后各个版本完 ...
- The component and implementation of a basic gradient descent in python
in my impression, the gradient descent is for finding the independent variable that can get the mini ...
- Python多线程thread、threading(一)
Python多线程(一) Python多线程,类似于同时执行多个不同程序,多线程运行的有点: 1.使用线程可以把占据长时间的程序中的任务放到后台去处理 2.用户界面可以更加吸引人,这样比如用户点击了一 ...
- java学习过程中遇到的坑及解决方法
1. Table 'my_data_base.gjp_zhangwu' doesn't exist Query: select * from gjp_zhangwu Parameters: 数据库中的 ...
- 使用ScheduledThreadPoolExecutor执行定时任务
ScheduledThreadPoolExecutor scheduled = new ScheduledThreadPoolExecutor(2); scheduled.scheduleAtFixe ...
- P1219 八皇后
题目描述 检查一个如下的6 x 6的跳棋棋盘,有六个棋子被放置在棋盘上,使得每行.每列有且只有一个,每条对角线(包括两条主对角线的所有平行线)上至多有一个棋子. 上面的布局可以用序列2 4 6 1 3 ...
- easyui的datagrid某个字段return一个a链接
实现方法用 formatter formatter: function(value, row, index) { return '<a href="javascript:void(0) ...
- 移动端目标识别(3)——使用TensorFlow Lite将tensorflow模型部署到移动端(ssd)之Running on mobile with TensorFlow Lite (写的很乱,回头更新一个简洁的版本)
承接移动端目标识别(2) 使用TensorFlow Lite在移动设备上运行 在本节中,我们将向您展示如何使用TensorFlow Lite获得更小的模型,并允许您利用针对移动设备优化 ...