自动获得焦点
IMPORT MODULE

允许在HTML元素出现后立即对其进行设置焦点,默认情况下会对 inputtextarea 带有 [autofocus="autofocus"] 生效。

代码演示

基础样例

最简单的用法。

expand code expand code
import { Component } from '@angular/core';

import { AutoFocusDirective } from '@delon/abc/auto-focus';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzInputModule } from 'ng-zorro-antd/input';

@Component({
  selector: 'components-auto-focus-simple',
  template: `
    <button nz-button (click)="showInput = !showInput">Toggle Input</button>
    @if (showInput) {
      <div class="mt-md">
        <input nz-input auto-focus />
      </div>
    }
  `,
  standalone: true,
  imports: [NzButtonModule, NzInputModule, AutoFocusDirective]
})
export class ComponentsAutoFocusSimpleComponent {
  showInput = false;
}

API

auto-focus

成员说明类型默认值
[enabled]是否启用booleantrue
[delay]延迟时长(单位:毫秒)number300
Loading...