Question

我需要在组件初始化后设置特定输入字段的焦点，并且我希望完全选择内部文本。在互联网上寻找一些暗示，我最终以这种方式编写了一个特殊的指令：

@Directive({
selector: '[focusControl]'})
export class FocusDirective {
@Input('focusControl') focusEvent: EventEmitter<boolean>;

constructor( @Inject(ElementRef) private element: ElementRef, private renderer: Renderer) {
}

ngOnInit() {
    this.focusEvent.subscribe(event => {
        this.renderer.invokeElementMethod(this.element.nativeElement, 'focus', []);
        if (this.element.nativeElement.tagName == "INPUT") {
            this.renderer.invokeElementMethod(this.element.nativeElement, 'select', []);
        }            
    });
}}

在模板中，显然我在元素上设置了指令：

 <input type="text" class="form-control" tabindex="1" [focusControl]="userIdFocus" maxlength="32">

然后，在组件的视图初始化之后，在AfterViewInit回调中，我尝试设置焦点并选择：

ngAfterViewInit() {
    this.userIdFocus.emit(true);
}

问题是该字段获得焦点，但未选中该文本。如果我尝试在点击按钮后设置焦点，那么整个过程就会正常工作。

我可以解决这个问题吗？

Answer 1

您使用的是Chrome吗？见于：https://stackoverflow.com/a/19498477

在Chrome中，通过.select（）选择并不坚持 - 添加一点点超时即可解决此问题。

根据您的代码，这样的事情应该有效：

setTimeout(() => {
  this.renderer.invokeElementMethod(this.element.nativeElement, 'select', []);
}, 0);

似乎执行中的轻微延迟允许浏览器检测焦点，然后允许调用select（）。

希望有所帮助！刚刚遇到问题。

Angular2控制焦点并以编程方式选择

1 个答案: