首页 文章

如何在angular4中按回车键关注下一个输入字段

提问于
浏览 次
2

如何使用'@ angular / core'中的angular4 import {Component，OnInit，ElementRef，ViewChild，Directive，Renderer，AfterViewInit}中的输入键来关注下一个输入字段;

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

2 回答

  • 0

    你正在以错误的方式使用* 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
}

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

    回复于
  • 6

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

    this.renderer2.parentNode(this.el.nativeElement).focus();
    回复于

相关问题