Angular 2 用户输入 - 按键事件过滤
HTML 中,用户点击链接、按下按钮或者输入文字时,这些用户的交互行为都会触发 DOM 事件
本章我们开始学习如何使用 AngularJS 2 事件绑定语法来绑定这些事件
接下来的范例都是基于 AngularJS 2 TypeScript 环境配置 上修改而来
按键事件过滤 ( 通过 key.enter)
我们可以只在用户按下回车 (enter) 键的时候才获取输入框的值
(keyup) 事件处理语句会监听到每一次按键,我们可以过滤按键,比如每一个 $event.keyCode,只有在按下回车键才更新 values 属性
AngularJS 可以为我们过滤键盘事件,通过绑定到 AngularJS 的 keyup.enter 伪事件监听回车键的事件
app/app.components.ts
import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` <input #box (keyup.enter)="values=box.value"> <p>{{values}}</p> ` }) export class AppComponent{ values = ''; }
运行以上范例,演示如下
blur( 失去焦点 ) 事件
我们可以使用 blur ( 失去焦点 ) 事件,它可以再元素失去焦点后更新 values 属性
下面的代码同时监听输入回车键与输入框失去焦点的事件
app/app.components.ts
import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` <input #box (keyup.enter)="values=box.value" (blur)="values=box.value"> <p>{{values}}</p> ` }) export class AppComponent{ values = ''; }
运行以上范例,演示如下