Angular 标签元素 input 回车切换焦点

最新推荐文章于 2026-06-25 09:38:12 发布

原创最新推荐文章于 2026-06-25 09:38:12 发布 · 2.2k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#angular #回车切换焦点 #模拟键盘事件 #回车事件

angular 同时被 3 个专栏收录

21 篇文章

订阅专栏

前端

12 篇文章

订阅专栏

web

6 篇文章

订阅专栏

本文介绍了一种在Angular中创建自定义指令的方法，用于实现输入框间的自动切换。通过使用@HostListener装饰器监听键盘事件，并在输入框接收到回车键时聚焦到下一个输入框。同时，该指令兼容多种UI组件，包括ng-zorro-antd和PrimeNG。

创建指令
ng g directive shared/ccDirective/nextTab

指令的全部源码：

import { Directive, HostListener, ElementRef } from '@angular/core';

@Directive({
  selector: '[next-tab]'
})
export class NextTabDirective {

  self:any;
  nextControl:any;

  @HostListener("keydown.enter", ["$event"])
  onEnter(event: KeyboardEvent) {
    if (this.nextControl) {
      if (this.nextControl.focus) {
        this.nextControl.focus();
        this.nextControl.select();
        event.preventDefault();
        return false;
      }
    }
  }

  constructor(private control: ElementRef) {
    this.self=control.nativeElement;
  }
}

html 模板中调用

<input type="text" next-tab>
<input type="text" next-tab>
<input type="text" next-tab>

ts 控制器中初始化

@ViewChildren(NextTabDirective) inputs: QueryList<NextTabDirective>;

  initTab(){
    const controls=this.inputs.toArray();
    for (let i=0;i<controls.length-1;i++){
      controls[i].nextControl=controls[i+1].self;
    }
  }

在生命周期钩子ngAfterViewInit里调用initTab进行初始化即可