angular4获得焦点事件_Angular 2 失去焦点事件
描述
您可以通过在页面上的输入框之外单击鼠标使输入框失去焦点。
例子
下面的例子描述了在Angular 2中的用户对blur事件的输入:
Angular 2 User Input On Blur
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {'app': {defaultExtension: 'ts'}}
});
System.import('/angular2/src/pp/user_input_onblur_event')
.then(null, console.error.bind(console));
Loading...
上述代码包括以下配置选项:您可以使用typescript版本配置index.html文件。在使用transpiler选项运行应用程序之前,SystemJS将TypeScript转换为JavaScript。
如果在运行应用程序之前没有翻译到JavaScript,您可能会看到浏览器中隐藏的编译器警告和错误。
当设置emitDecoratorMetadata选项时,TypeScript会为代码的每个类生成元数据。如果不指定此选项,将生成大量未使用的元数据,这会影响文件大小和对应用程序运行时的影响。
Angular 2包括来自app文件夹的包,其中文件将具有.ts扩展名。
接下来它将从应用程序文件夹加载主组件文件。如果没有找到主要组件文件,那么它将在控制台中显示错误。
当Angular调用main.ts中的引导函数时,它读取Component元数据,找到“app”选择器,找到一个名为app的元素标签,并在这些标签之间加载应用程序。
要运行代码,您需要以下TypeScript(.ts)文件,您需要保存在应用程序文件夹下。user_input_onblur_event.tsimport {bootstrap} from 'angular2/platform/browser';
import {OnblurEventComponent} from "./user_onblur_event.component";
bootstrap(OnblurEventComponent);
现在我们将在TypeScript(.ts)文件中创建一个组件,如下所示:user_onblur_event.component.tsimport {Component} from 'angular2/core';
@Component({
selector: 'onblur-event',
template: `
User Input On Blur Event
(keyup.enter)="values=myval.value"
(blur)="values=myval.value">
{{values}}
`
})
export class OnblurEventComponent {
values='';
}@Component是一个装饰器,它使用配置对象来创建组件及其视图。
当用户离开表单字段时,Angular 2调用keyup事件,onblur事件使输入框失去焦点。
输出
让我们执行以下步骤,看看上面的代码如何工作:将上面的HTML代码保存为index.html文件,如同我们在环境章节中创建的,并使用上面的包含.ts文件的应用程序文件夹。
打开终端窗口并输入以下命令: npm start
稍后,浏览器选项卡应打开并显示输出,如下所示。
或者你可以用另一种方式运行这个文件:将上述HTML代码作为user_input_onblur.html文件保存在服务器根文件夹中。
将此HTML文件打开为http://localhost/user_input_onblur.html,并显示如下所示的输出。
该示例显示了当用户离开表单字段并使输入框失去焦点时onblur事件的功能。
angular4获得焦点事件_Angular 2 失去焦点事件相关推荐
- 2020.11.18第十三章 事件(事件处理程序;事件对象;事件类型:UI事件;焦点事件;鼠标与键盘事件 变动事件 模拟事件)
事件处理程序 html事件处理程序(直接在html中书写script) <!-- //#### 事件处理程序 //html时间程序 可以直接在HTML文件中写,而且还可以引用其他地方的方法和函数 ...
- android tv key事件,Android TV中按键事件和焦点处理总结
本文总结了Android TV开发中的按键事件和焦点处理,TV端的开发不同于手机开发,主要区别在于焦点的处理,常常会用到手机端很少用到的开发接口.了解这些不同的接口和区别,有助于很快的上手TV端的开发 ...
- java监听焦点事件_监听input输入框的失去焦点事件与按钮点击事件执行的顺序问题...
1.问题描述 当在监听input失去焦点的事件的时候,在input输入框输入一段文字之后,点击发送按钮会发现,只触发了失去焦点事件,按钮点击事件并没有被触发,当再次点击按钮的时候,事件才会被触发 2. ...
- 【javaScript】探讨 监听input输入框的失去焦点事件与按钮点击事件执行的顺序问题
1.问题描述 在input输入框输入一段文字之后,点击发送按钮会发现,只触发了失去焦点事件,按钮点击事件并没有被触发,当再次点击按钮的时候,事件才会被触发,这明显不是我们想要的,我们来看看怎么解决 2 ...
- input得到焦点显示文本框,失去焦点隐藏文本框
上一篇 : input 输入的内容时更改input的宽度 此篇是上一篇的延伸功能 input得到焦点显示文本框,失去焦点隐藏文本框 思路 : 1 创建一个文本标签font和输入标签input,页面加载 ...
- wpf使某个控件失去焦点_WPF 在TextBox失去焦点时检测数据,出错重新获得焦点解决办法...
在WPF的TextBox的LostFocus事件中直接使用Focus()方法会出现死循环的问题 正确的使用方式有2中方法: 方法一: privatevoidtextBox3_LostFocus(obj ...
- android webview 失去焦点,Android的webview失去焦点
情况:我有一个web输入字段在其中输入一个位置,有一个webview坐在它下面显示建议.该输入字段上有一个keyup处理程序和一个onchange处理程序.在keyup上有一条消息发出来调用api来填 ...
- mfc 静态框接收tab焦点_目标检测中焦点损失的入门指南
介绍 对象检测是计算机视觉社区中研究最广泛的主题之一.它已经进入了各个行业,涉及从图像安全,监视,自动车辆系统到机器检查的用例. 当前,基于深度学习的对象检测可以大致分为两类: 两级检测器,例如基于区 ...
- extjs获取焦点和失去焦点_[NBA夏联]焦点单三连红,NBA夏季联赛同样精彩
昨日篮球公推失手,早上在朋友圈更新的夏联比赛也因为双方第三节的萎靡没能红单. 篮球焦点单大分继续红单,残阵的天猫打出了非常不错的进攻状态,主场大胜梦想,中国球员邵婷也得到了了赛季新高的10分钟上场时间 ...
最新文章
- Windows Tensorflow GPU安装
- 怎么用计算机知道别人手机密码,怎样才能知道别人家的wifi密码
- 【转】使用JDK自带jvisualvm监控tomcat
- 如何在 ASP.Net Core 中使用 Autofac
- 近7万新冠域名一半是钓鱼网站?以色列老牌安全厂商Check Point推出全端保护新战略
- 在 Windows 下部署 Go 语言环境
- 在Outlook中设置类似Foxmail带日期的签名
- 总结过去10年的程序员生涯_给程序员的一些总结性忠告
- c语言交换两个变量的值 讲课,用C语言的泛型实现交换两个变量值
- 如果可以再读一次研究生
- 重装 IDEA 再也不怕了,一招搞定配置同步!
- 读书笔记(第五、六周)
- 【电机测速】M法、T法、M/T法测速系统设计实现
- css实现3D书本翻页动画
- Type mismatch: inferred type is MainActivity but FlutterEngine was expected
- 叮当健康明日港股上市:拟募资3.4亿港元 单季期内亏损4亿
- 倾角传感器的精度和线性误差的区别
- Android 点击图片全屏
- Tomcat解决中文乱码
- Coles客澳市携高品质明星食品第三年亮相中国国际进口博览会
热门文章
- 手机CPU各大厂商以及手机 cpu架构体系分类
- 关于谷歌浏览器搜索引擎被360劫持的问题,地址栏搜索变成360引擎的问题的解决方法 360搜索
- JDBC的ResultSet
- 计算机网络域搭建,计算机网络课程设计_组建局域网及搭建服务器(26页)-原创力文档...
- 攻防世界 Misc高手进阶区 2分题 打野
- GBase 8a UNION用法
- python天天向上每十天休息一天_统计师的Python日记【第十天:数据聚合】
- 递归数列(recursive sequence)
- [BZOJ3231] [Sdoi2008]递归数列
- 编程语言流行指数 排行网站