Question

如何通过（点击）事件设置对输入的关注？我有这个功能，但我显然缺少一些东西（角度新手在这里）

sTbState: string = 'invisible';
private element: ElementRef;
toggleSt() {
  this.sTbState = (this.sTbState === 'invisible' ? 'visible' : 'invisible');
  if (this.sTbState === 'visible') {
    (this.element.nativeElement).find('#mobileSearch').focus();
  }
}

Answer 1

您可以使用@ViewChild装饰器。文档位于https://angular.io/api/core/ViewChild。

这是一个有效的plnkr：http://plnkr.co/edit/KvUmkuVBVbtL1AxFvU3F

这段代码的要点归结为，给你的输入元素命名并在你的模板中连接点击事件。

 <input #myInput />
 <button (click)="focusInput()">Click</button>

在您的组件中，实现@ViewChild或@ViewChildren来搜索元素，然后实现点击处理程序以执行您需要的功能。

export class App implements AfterViewInit {
  @ViewChild("myInput") inputEl: ElementRef;

  focusInput() {
    this.inputEl.nativeElement.focus()
  }

现在，单击按钮，然后闪烁的插入符号将出现在输入字段中。建议不要使用ElementRef作为安全风险，像XSS攻击（https://angular.io/api/core/ElementRef），因为它导致不太便携的组件。

还要注意，当inputEl事件触发时，ngAfterViewInit变量将首先可用。

Answer 2

将输入元素作为ts文件中的本机元素。

//HTML CODE

<input #focusTrg />
<button (click)="onSetFocus()">Set Focus</button>

//TS CODE
@ViewChild("focusTrg") trgFocusEl: ElementRef;

  onSetFocus() {
     setTimeout(()=>{
      this.trgFocusEl.nativeElement.focus();
    },100);
  }

我们需要将this.trgFocusEl.nativeElement.focus();放在setTimeout()中然后它会正常工作，否则会引发未定义的错误。

Answer 3

试试这个：

在你 HTML 文件中：

<button type="button" (click)="toggleSt($event, toFocus)">Focus</button>

<!-- Input to focus -->
<input #toFocus>

ts 文件中的

：

sTbState: string = 'invisible';

toggleSt(e, el) {
  this.sTbState = (this.sTbState === 'invisible' ? 'visible' : 'invisible');
  if (this.sTbState === 'visible') {
    el.focus();
  }
}

Answer 4

尝试一下。

//on .html file
<button (click)=keyDownFunction($event)>click me</button>

// on .ts file
// navigate to form elements automatically.
keyDownFunction(event) {
    // specify the range of elements to navigate
    let maxElement = 4;
    if (event.keyCode === 13) {
        // specify first the parent of container of elements
        let container = document.getElementsByClassName("myForm")[0];
        // get the last index from the current element.
        let lastIndex = event.srcElement.tabIndex ;
        for (let i=0; i<maxElement; i++) {
            // element name must not equal to itself during loop.
            if (container[i].id !== event.srcElement.id && 
                lastIndex < i) {   
                lastIndex = i;                 
                const tmp = document.getElementById(container[i].id);
                (tmp as HTMLInputElement).select();
                tmp.focus();
                event.preventDefault();
                return true;
            }
        }           
    }
}

Angular 2/4设置焦点在输入元素上

4 个答案: