[英]How can I manage focus states on an Angular 2 custom input component?
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.我找不到通过 Angular 2 管理自定义输入如何从
label
(及其for
属性)获得焦点以及如何管理这些状态的方法。
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. HTML 有 tabindex 属性,这使得任何元素都可以聚焦。 http://w3c.github.io/html/editing.html#the-tabindex-attribute
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(){
....
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.