I cannot find a way to manage through Angular 2 how a custom input gets its focus from a label
(and its for
attribute) and how to manage those states.
I'm trying to give my the same focus-and-blur behaviour that a regular has. Any ideas on that?
Thanks!
HTML have tabindex attribute, that makes any element focusable. http://w3c.github.io/html/editing.html#the-tabindex-attribute
Then in component you can listen focus event:
@HostBinding('tabindex') tabindex = 0;
@HostListener('focus')
focusHandler() {
alert('focused!');
}
With accessibility in mind, every input must contain a label, so an input component should contain the input and label tags
imports...
@Component({
selector: 'app-input',
templateUrl:
`<label [for]="id">
<div class="label">{{label}}</div>
<input [id]="id"
[type]="type"
[attr.maxlength]="maxlength"
[autocomplete]="autocomplete"
[placeholder]="placeholder"
(input)="onInput($event)"
(focus)="onFocus()"
required
>
</label>`,
styleUrls: ['./input.component.scss'],
})
export class InputComponent{
@Input() label: string;
@Input() id: string;
@Input() type: string;
@Input() maxlength: string;
@Input() autocomplete = "on";
@Input() disabled = null;
onInput(event: any){
....
}
onFocus(){
....
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.