14

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

有谁知道为什么？

Angular 材质 - 输入文档

<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>
4

7 回答 7

14

您的尝试不起作用，因为：

  • 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>
于 2017-05-24T08:46:30.803 回答
11

您是否尝试使用cdkFocusInitialwhich 将指定将在初始化时获得焦点的元素

文档可以在这里找到

于 2018-12-18T04:22:48.833 回答
7 
<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()
于 2018-04-25T06:54:37.553 回答
6

我在同样的问题上苦苦挣扎。我正在使用 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 matInput>from<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();
}

}
于 2017-06-23T20:36:22.433 回答
0

您通常可以使用模板标记在没有任何 Typescript 代码的情况下设置焦点。但是在对话框的情况下，您需要将@Mackelito 的解决方案与@ViewChildand一起使用ngAfterViewInit()。

当菜单出现时，我必须关注菜单内的 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 上。

在此处输入图像描述

于 2019-04-04T14:42:15.377 回答
-1

在输入标签类型cdkFocusInitial

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

如果您想了解更多信息，请单击此处

于 2020-09-17T06:07:09.733 回答
-1

在设置输入获取焦点之前尝试添加一些延迟。我已将此行为作为指令供您参考。

延迟焦点.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">

你可以在这里试试。

于 2018-07-26T03:23:54.920 回答