Question

我想打开一个模态窗口，并且其中的输入将被聚焦。

在html文件中

<img id='searchIcon' 
     src="images/search.png" 
     class="icon iconCenter" 
     data-toggle="modal" 
     data-target="#myModal" 
     (click)='focusSearch();' />

<div id="myModal" class="modal fade modal-container" role="dialog">
    <h3>SEARCH</h3>
    <input id='inputSearch' type="text" autofocus>
</div>

使用autofocus属性，我第一次打开模态视图时得到了焦点，但是在我关闭并打开模态之后再没有做任何事情。（在firefox中根本不工作）< / p> ts文件中的

focusSearch(){
    document.getElementById("inputSearch").focus();
}

如果有人可以留下快速演示，我会很感激

Answer 1

试试这个，没有功能

<img id='searchIcon' src="images/search.png" class="icon iconCenter" data-toggle="modal" data-target="#myModal" (click)='myInput.focus()'>
    <div id="myModal" class="modal fade modal-container" role="dialog">
       <h3>SEARCH</h3>
       <input id='inputSearch' type="text" autofocus #myInput>
    </div>

Answer 2

设置焦点示例

<强> HTML

   <button (click)="setFocus()">Set Focus</button>
    <input type="text" [(ngModel)]="term2" #inputBox>

<强>组件

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-general',
  templateUrl: './general.component.html',
  styleUrls: ['./general.component.scss']
})
export class GeneralComponent {

  @ViewChild("inputBox") _el: ElementRef;

  setFocus() {
    this._el.nativeElement.focus();
  }
}

您可以根据需要修改代码。您也可以在加载组件后立即设置焦点。例如

 ngAfterViewInit() {
    this._el.nativeElement.focus();
  }

More Info

Angular 2 .focus（）不起作用

2 个答案: