[Angular] Adding keyboard events to our control value accessor component
One of the most important thing when building custom form component is adding accessbility support.
The component should be focusable. we can achieve this by adding 'tabindex="0"':
<div
tabindex="0"
>
Add some css class for foucs:
<div
[class.focus]="focused"
tabindex="0"
(focus)="onFocus($event)"
(blur)="onBlur($event)"
>
.stock-counter {
& .focus {
box-shadow: 0 1px 1px rgba(0, 0, 0, .6);
} ...
}
onFocus() {
this.focused = true;
this.onTouch();
} onBlur() {
this.focused = false;
this.onTouch();
}
Handle keydwon event with code:
<div
[class.focus]="focused"
tabindex="0"
(keydown)="onKeyDown($event)"
(focus)="onFocus($event)"
(blur)="onBlur($event)"
>
onKeyDown(event: KeyboardEvent) { const handler = {
ArrowDown: () => this.decrement(),
ArrowUp: () => this.increment()
}; if(handler[event.code]) {
event.preventDefault();
event.stopPropagation();
handler[event.code]();
}
}
[Angular] Adding keyboard events to our control value accessor component的更多相关文章
- jQuery.Hotkeys - lets you watch for keyboard events anywhere in your code supporting almost any key combination
About jQuery Hotkeys is a plug-in that lets you easily add and remove handlers for keyboard events a ...
- [Angular] Implement a custom form component by using control value accessor
We have a form component: <label> <h3>Type</h3> <workout-type formControlName=& ...
- [Angular] Angular Global Keyboard Handling With EventManager
If we want to add global event handler, we can use 'EventManager' from '@angular/platform-broswer'. ...
- [Angular] Router outlet events
For example, we have a component which just simply render router-outlet: import { Component } from ' ...
- [Angular 2] Using events and refs
This lesson shows you how set listen for click events using the (click) syntax. It also covers getti ...
- [AngularFire] Angular File Uploads to Firebase Storage with Angular control value accessor
The upload class will be used in the service layer. Notice it has a constructor for file attribute, ...
- [Angular] Progress HTTP Events with 'HttpRequest'
New use case that is supported by the HTTP client is Progress events. To receive these events, we cr ...
- [Angular2 Form] Create custom form component using Control Value Accessor
//switch-control component import { Component } from '@angular/core'; import { ControlValueAccessor, ...
- Javascript Madness: Mouse Events
http://unixpapa.com/js/mouse.html Javascript Madness: Mouse Events Jan WolterAug 12, 2011 Note: I ha ...
随机推荐
- Spider_lxml
xpath工具(解析) xpath 在XML文档中查找信息的语言,同样适用于HTML文档的检索 xpath辅助工具 Chrome插件 :XPath Helper 打开 :Ctrl + Shift + ...
- SSO单点登录学习总结(2)——基于Cookie+fliter单点登录实例
1.使用Cookie解决单点登录 技术点: 1.设置Cookie的路径为setPath("/").即Tomcat的目录下都有效 2.设置Cookie的域setDomain(&quo ...
- 单元测试Assert类
Assert类主要的静态成员 1. AreEqual:方法被重载了N多次,主要功能是判断两个值是否相等:如果两个值不相等,则测试失败. 2. AreNotEqual:方法被重载了N多次,主要功能是判断 ...
- android 仿ios 对话框已封装成工具类
对话框 在android中是一种非经常见的交互提示用户的方式,可是非常多产品狗都叫我们这些做android的仿ios,搞的我们android程序猿非常苦逼,凭什么效果老是仿ios,有没有一点情怀,只是 ...
- hdu 2795 Billboard(线段树单点更新)
Billboard Time Limit: 20000/8000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- js进阶 13-6 jquery动画效果相关常用函数有哪些
js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...
- 14. Spring Boot MyBatis 连接数据库
转自:https://blog.csdn.net/catoop/article/details/50553714
- Android Mvvm模式的理解
1. Mvvm是什么,Mvvm是怎么来的?Mvvm模式广泛应用在WPF项目开发中,使用此模式可以把UI和业务逻辑分离开,使UI设计人员和业务逻辑人员能够分工明确. Mvvm模式是根据MVP模式来的,可 ...
- Altium Designer中Electrical Type的意思
:之前Altium Designer设计图时发现: 它的引脚上有两个三角 双击打开引脚,打开配置: 于是从网上查了一下:http://blog.csdn.net/jbb0523/article/det ...
- 关于Clipboard和GlobalAlloc函数的关系
一句话:为了满足进程间通信,使用了clipboard的方法,clipboard是系统提供的一段任何进程都可以访问的公共内存块,malloc 和new分配的动态内存块是在进程的私有地址空间分配的,所以必 ...