方便的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 键盘事件绑定与过滤的更多相关文章

  1. 捕获enter键盘事件绑定到登录按钮

    /** *捕获enter键盘事件绑定到登录按钮 */ function keyLogin(event) { if (event.keyCode == 13) { document.getElement ...

  2. jQuery键盘事件绑定Enter键

    <script> $(function(){ $(document).keydown(function(event){ if(event.keyCode==13){ $("#mo ...

  3. 前端(十五)—— JavaScript事件:绑定事件方式、事件的冒泡和默认事件、鼠标事件、键盘事件、表单 事件、文档事件、图片事件、页面事件

    JS事件:绑定事件方式.事件的冒泡和默认事件.鼠标事件.键盘事件.表单 事件.文档事件.图片事件.页面事件 一.事件的两种绑定方式 1.on事件绑定方式 document.onclick = func ...

  4. JavaFX桌面应用开发-鼠标事件和键盘事件

    鼠标相关事件的操作初始代码 package application; import javafx.application.Application;import javafx.event.ActionE ...

  5. vue学习笔记(一)关于事件冒泡和键盘事件 以及与Angular的区别

    一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...

  6. 【Angular 5】数据绑定、事件绑定和双向绑定

    本文为Angular5的学习笔记,IDE使用Visual Studio Code,内容是关于数据绑定,包括Property Binding.Class Binding.Style Binding. 在 ...

  7. 关于事件冒泡和键盘事件 以及与Angular的区别

    一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...

  8. Dojo初探之4:dojo的event(鼠标/键盘)事件绑定操作(基于dojo1.11.2版本)

    前言: 上一章详解了dojo的dom/query操作,本章基于dom/query基础上进行事件绑定操作 dojo的事件 dojo的事件绑定操作分为鼠标和键盘两种进行详解 1.鼠标事件 我们沿用上一章中 ...

  9. angular,vue,react的基本语法—动态属性、事件绑定、ref,angular组件创建方式

    基本语法: 动态属性: vue: v-bind:attr="msg" :attr="msg" react: attr={msg} angular [attr]= ...

随机推荐

  1. python-web自动化-Js-日历操作

    日历控件是web网站上经常会遇到的一个场景,有些输入框是可以直接输入日期的,有些不能:以12306网站为例,讲解如何解决日历控件为readonly属性的问题. 基本思路:先用js去掉readonly属 ...

  2. Android开发 静态static类与static方法持有Context是否导致内存泄露的疑问

    简述 在Android开发的过程中,难免会使用单例模式或者静态方法工具类.我们会让它们持有一些外部的Context或者View一般有以下几种情况: 单例模式,类的全局变量持有Context 或 Vie ...

  3. Spring3.2.0 之后各个版本完整包下载地址

    留作工作学习使用 现在Spring官网已经很难找到完整包的下载地址,都已经迁移到Maven上,这给不能用Maven或者不愿用Maven的各位带来了不小的麻烦. 经过挖掘,找到了下载3.2之后各个版本完 ...

  4. 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 ...

  5. Python多线程thread、threading(一)

    Python多线程(一) Python多线程,类似于同时执行多个不同程序,多线程运行的有点: 1.使用线程可以把占据长时间的程序中的任务放到后台去处理 2.用户界面可以更加吸引人,这样比如用户点击了一 ...

  6. java学习过程中遇到的坑及解决方法

    1. Table 'my_data_base.gjp_zhangwu' doesn't exist Query: select * from gjp_zhangwu Parameters: 数据库中的 ...

  7. 使用ScheduledThreadPoolExecutor执行定时任务

    ScheduledThreadPoolExecutor scheduled = new ScheduledThreadPoolExecutor(2); scheduled.scheduleAtFixe ...

  8. P1219 八皇后

    题目描述 检查一个如下的6 x 6的跳棋棋盘,有六个棋子被放置在棋盘上,使得每行.每列有且只有一个,每条对角线(包括两条主对角线的所有平行线)上至多有一个棋子. 上面的布局可以用序列2 4 6 1 3 ...

  9. easyui的datagrid某个字段return一个a链接

    实现方法用 formatter formatter: function(value, row, index) { return '<a href="javascript:void(0) ...

  10. 移动端目标识别(3)——使用TensorFlow Lite将tensorflow模型部署到移动端(ssd)之Running on mobile with TensorFlow Lite (写的很乱,回头更新一个简洁的版本)

    承接移动端目标识别(2) 使用TensorFlow Lite在移动设备上运行         在本节中,我们将向您展示如何使用TensorFlow Lite获得更小的模型,并允许您利用针对移动设备优化 ...