[Angular] Adding keyboard events to our control value accessor component
2017-04-12 02:41
1751 查看
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"':
Add some css class for foucs:
Handle keydwon event with code:
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] Implement a custom form component by using control value accessor
- [AngularFire] Angular File Uploads to Firebase Storage with Angular control value accessor
- [Angular2 Form] Create custom form component using Control Value Accessor
- [Angular] Create a ng-true-value and ng-false-value in Angular by controlValueAccessor
- [Angular2] Map keyboards events to Function
- ASP.NET 揭秘 第二十九章 高级控件开发(ASP.MET) 1.Adding Templates to a Control
- bkb is a program to control keyboard/mouse with eyes(1)
- [AngularJS] Adding custom methods to angular.module
- Adding a horizontal separator to a Flex PopUpButton control’s pop up menu (redux)
- Adding mouse functionality to any control
- Adding Client Capabilities to a Web Server Control
- bkb is a program to control keyboard/mouse with eyes(2)
- Adding Value To Combo List at Runtime in Oracle Forms
- Adding ActiveX Control OCX to WPF
- How to add default value to DropDownList control
- Adding Buttons to the Viewer Control
- How to pass ViewState value from web form page to web user control page?
- [Angular] Provide Feedback to Progress Events with Angular’s HttpRequest Object
- How to use a TControlCanvas in a component
- How to handle form events after adding a master page to an existing page