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

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（）随后被调用。

。

希望有帮助！我自己刚遇到问题。