Angular 2 Material 輸入焦點不起作用

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是推動在墊子上，重點類的屬性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

<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()

Answer 4

我正在努力解決同樣的問題。 我正在使用 F6 打開對話框，但無法獲得<input>以獲得焦點。 事實證明，我並沒有阻止 F6 的默認行為，而 F6 會突出顯示瀏覽器 URL 窗口； 所以它正在竊取焦點。

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

此外，沒有魔術標簽屬性有效。 自動對焦，對焦，對焦，不管怎樣，沒有骰子。 我必須創建一個指令並在我的輸入元素中使用它。 我使用這個答案得到了幫助。

這是添加指令后的元素（numberOnly 是另一個僅用於數字輸入的指令）：

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

**編輯：為了清晰起見，按照@Mackelito 的建議添加指令代碼。 這是我使用上面鏈接的答案編寫的指令。 請記住，材料已將其標簽標簽從<input md-input>更改為<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 5

您通常可以使用模板標記在沒有任何 Typescript 代碼的情況下設置焦點。 但是在 Dialog 的情況下，您需要將@Mackelito 的解決方案與@ViewChild和ngAfterViewInit() 。

當 Menu 出現時，我必須聚焦在 Menu 內的 TextArea。 幸運的是，Menu 有一個我可以綁定的 (menuOpened) 事件。

  <button mat-stroked-button color="accent" [matMenuTriggerFor]="addMenu"
    (menuOpened)="newTypes.focus()">
    Add
    <mat-icon class="dyna-dropdown-arrow">arrow_drop_down</mat-icon>
  </button>
  <mat-menu #addMenu="matMenu" [overlapTrigger]="false">
    <form [formGroup]="formGroup" (ngSubmit)="onFormSubmit()" novalidate (keydown.tab)="$event.stopPropagation()">
      <mat-form-field appearance="outline" (click)="$event.stopPropagation(); false;">
        <mat-label>New Pay Types</mat-label>
        <textarea #newTypes rows="6" matInput placeholder="New Pay Types" [formControl]="formGroup.controls['payTypes']" required></textarea>
        <mat-hint>Enter multiple Pay Types, separated by newlines</mat-hint>
        <mat-error *ngIf="formGroup.controls['payTypes'].invalid">Required</mat-error>
      </mat-form-field>
      <div fxLayout="row-reverse" fxLayoutGap="8px" fxLayoutAlign="start center">
        <button mat-stroked-button color="accent" type="submit" [disabled]="!formGroup.valid">Add</button>
        <button mat-button type="button">
          Cancel
        </button>
      </div>
    </form>
  </mat-menu>

這里的重要部分是(menuOpened)="newTypes.focus()" ，我們看到newTypes是一個 TemplateRef 變量，附加到我想要關注的 TextArea 上，標記為<textarea #newTypes 。

這是一個屏幕截圖，顯示我的菜單打開，它立即獲得焦點到其中的 Textarea。

Answer 6

在輸入標簽類型cdkFocusInitial

<input matInput [(ngModule)]="cityName" cdkFocusInitial>

那設置它的工作 100%

如果您不想了解更多信息，請單擊此處

Answer 7

嘗試在設置輸入獲取焦點之前添加一些延遲。 我已將此行為作為指令供您參考。

延遲焦點.ts

import { Directive, Input, ElementRef } from '@angular/core';

@Directive({
  selector: '[delayFocus]'
})
export class DelayFocusDirective {

  @Input() delayFocusInterval;
  @Input() set delayFocus(condition: boolean) {
    if (condition) {
      console.log(this.delayFocusInterval);
      setTimeout(() => {
        this.el.nativeElement.focus();
      }, this.delayFocusInterval | 500);
    }
  }
  constructor(private el: ElementRef) { }
}

例子

<input type="text" placeholder="Delay 100ms to get focus" delayFocus="true" delayFocusInterval="100">

你可以在這里試試。