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

我需要在组件初始化后设置特定输入字段的焦点，并且希望完全选择内部文本。展望互联网的一些提示，我最后写一个speficic指令，是这样的：Angular2控制焦点并以编程方式选择

@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); 
}

的问题是该领域获得焦点，但文本没有被选中。如果我尝试设置点击按钮后的焦点，那么整个事情就会正确地工作。

我可以修复吗？

来源

2017-02-20 Gio

要选择在聚焦输入控制的全部内容，你试图使用我知道这不是Angular 2指令，但它不会解决您的问题吗？注意“onClik”。 – meDev

您使用的是Chrome吗？如下所示：https://stackoverflow.com/a/19498477

在Chrome中，通过.select（）的选择不会停留 - 添加轻微超时可以解决此问题。

基于您的代码，这样的事情应该工作：

似乎在执行轻微的延迟可以让浏览器来检测对焦，可以让选择（），然后被调用。

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

来源

2017-03-29 22:54:08 Payam

感谢Payam，但它没有奏效。说得更好一些，它随机地工作（至少它看起来像我一样随机），就像它在处理超时之前那样。我正在使用Chrome – Gio

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

回答

相关问题