角度2材质输入焦点不起作用

Question

输入位于模态对话框内.我不知道它为什么不起作用.我查看了官方文档,它列出了焦点,你可以传递给元素,但它不起作用？

有谁知道为什么？

角度材料 - 输入文档

<form class="example-form">

  <md-input-container class="example-full-width" style="width: 300px; padding: 5px; border-radius: 10px;">
    <input mdInput type="email" name="to" placeholder="Email">
    <md-error></md-error>
  </md-input-container>

  <md-input-container focus focused>
    <input mdInput type="text" name="a" placeholder="zzzz" focus focused (focus)="">
  </md-input-container>

</form>

Answer 1

您的尝试不起作用,因为:

• focused是一个推动以mat为重点的课程的财产mdInputContainer.您可以使用它来了解您的输入是否有重点.您无法使用它来更改焦点状态.
• focus是一种mdInput允许您以编程方式聚焦输入的方法.你可以myInput.focus()用例如myInput类似ViewChild('myInput')的东西来调用.

但实现您想要的最简单方法是使用标准autofocus属性:

<md-input-container>
    <input mdInput type="text" name="a" placeholder="zzzz" autofocus>
</md-input-container>

Answer 2

您是否尝试过cdkFocusInitial指定将在初始化时重点关注的元素

文档可以在这里找到

Answer 3

我正在努力解决同样的问题.我正在使用F6打开对话框而无法<input>获得焦点.事实证明,我没有阻止F6的默认行为,F6突出显示浏览器URL窗口; 所以它正在窃取焦点.

switch (event.keyCode) {
      case 117:
        event.preventDefault();
        this.openAddAveragesDialog();
        break;
      default:
        return;
    }

此外,没有魔术标签属性.自动对焦,聚焦,聚焦,无论如何,没有骰子.我必须创建一个指令并在我的input元素中使用它.我使用这个答案得到了帮助.

这是添加指令后的元素(numberOnly是仅用于数字输入的另​​一个指令):

<md-input-container> <input mdInput [focus]="true" [numberOnly]="true"/></md-input-container>

**编辑:为了清晰起见,按照@Mackelito的建议添加指令代码.这是我用上面链接的答案写的指令.请记住,材料已将其标签标签更改<input matInput>为<input md-input>

import {Directive, ElementRef, Inject, Input, OnChanges, OnInit,     Renderer} from '@angular/core';

@Directive({
  selector: '[focus]'
})

export class FocusDirective implements OnChanges, OnInit {
@Input()
focus: boolean;

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

ngOnInit() {
    this.renderer.invokeElementMethod(this.element.nativeElement,   'focus', []);
}

public ngOnChanges() {
this.element.nativeElement.focus();
}

} 

Answer 4

<form class="example-form">
  <md-input-container class="example-full-width" style="width: 300px; padding: 5px; border-radius: 10px;">
    <input mdInput #emailInput="matInput" type="email" name="to" placeholder="Email">
    <md-error></md-error>
  </md-input-container>
</form>

然后在控制器中：

@ViewChild('emailInput') searchInput: MatInput;
....
ngAfterViewInit() {
  this.emailInput.focus();
}

this.emailInput.focus（）所做的实际上是“ elementRef.nativeElement.focus（）” https://github.com/angular/material2/blob/master/src/lib/input/input.ts#L287

因此，您可以像这样：

this.emailInput.nativeElement.focus()