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

时间:2017-04-19 19:36:55

标签: angular angular-material2 angular-forms

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

有谁知道为什么?

Personal access token

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

7 个答案:

答案 0 :(得分:10)

您的尝试无效,因为:

  • focused是推动mdInputContainer上以mat为重点的课程的属性。您可以使用它来了解您的输入是否有重点。您无法使用它来更改焦点状态。
  • focusmdInput上的一种方法,可让您以编程方式聚焦输入。您可以拨打myInput.focus() myInput,例如ViewChild('myInput')

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

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

答案 1 :(得分:5)

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

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

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

这是添加指令后的元素(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();
}

} 

答案 2 :(得分:5)

<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()的作用实际上是&#34; elementRef.nativeElement.focus()&#34; https://github.com/angular/material2/blob/master/src/lib/input/input.ts#L287

所以你可以这样做:

this.emailInput.nativeElement.focus()

答案 3 :(得分:5)

您是否尝试过使用cdkFocusInitial,它将指定在初始化时会受到关注的元素

可以找到

文档here

答案 4 :(得分:0)

通常,您可以使用模板标记来设置焦点,而无需任何Typescript代码。但是对于对话框,您需要将@Mackelito的解决方案与@ViewChildngAfterViewInit()结合使用。

当菜单出现时,我必须聚焦菜单内的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是附加到要标记为<textarea #newTypes的TextArea的TemplateRef变量。

这是显示我的菜单打开的屏幕快照,它立即将焦点对准其中的Textarea。

enter image description here

答案 5 :(得分:0)

在输入标签中,输入 cdkFocusInitial

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

将工作设置为100%

如果您不想了解更多信息,click here

答案 6 :(得分:-1)

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

delay-focus.ts

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

示例

const http = require('http');

http.createServer(function(req, resp) {
    if (req.url === '/favicon.ico') {
      res.end();
      return;
    }

    console.log("request arrived.")
    resp.writeHead(200, { 'Content-Type': 'application/json' });
    resp.end("Hello world!!");

}).listen(3000);

您可以here试试。