如何使用角度4中的输入键来关注下一个输入字段

Question

如何使用角键4中的Enter键进行下一个输入字段的聚焦

  import { Component, OnInit,ElementRef,ViewChild,Directive,Renderer,AfterViewInit} from '@angular/core';

  @Component({
    selector: 'cbody',
    templateUrl: './cbody.component.html',
    styleUrls: ['./cbody.component.css']
  })  
  export class CbodyComponent  implements  OnInit, AfterViewInit  {

    constructor(public renderer: Renderer,private el:ElementRef) {}

    @ViewChild('ft01') infocus: ElementRef;

    ngOnInit(){};

    ngAfterViewInit() {
          this.renderer.invokeElementMethod(
          this.infocus.nativeElement, 'focus');                     
    }

    keytab(event:any){      
          console.log(event.keyCode );  
          console.log(this.dataloops );     
    }

   dataloops=[
    { "name":"csdn" , "url":"www.runoob.com" }, 
    { "name":"google" , "url":"www.google.com" }, 
    { "name":"ifeng" , "url":"www.weibo.com" }
   ];

  }

 <p>
   cbody works!
 </p>


 <div>
 <ul *ngFor="let dataloop of dataloops">
    <li  >{{dataloop.name}}<input type="text" name="intext" [(ngModel)]="dataloop.url" #ft01 (keyup.enter)="keytab($event)"/></li>
 </ul>
 </div>

Answer 1

你正在以错误的方式使用* ngFor，它会重复放置的元素。 你需要在li元素上设置* ngFor。

<ul>
    <li *ngFor="let dataloop of dataloops">
       {{dataloop.name}}
        <input type="text" name="intext" 
        [(ngModel)]="dataloop.url" #ft01 (keyup.enter)="keytab($event)"/>  
    </li>
 </ul>  

现在更新.ts文件如下

keytab(event){
    let element = event.srcElement.nextElementSibling; // get the sibling element

    if(element == null)  // check if its null
        return;
    else
        element.focus();   // focus if not null
}

这段代码应该可以正常工作

Answer 2

你必须使用渲染器来访问下一个兄弟元素;使用renderer2：在构造函数中注入renderer2然后：

this.renderer2.parentNode(this.el.nativeElement).focus();