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
原文：http://www.cnblogs.com/Answer1215/p/6697213.html