Angular 14：如何为时间输入框添加固定冒号并自动跳转？

你可以通过监听输入事件+格式化处理来实现类似效果，以下是两种常用方案：

方案一：使用模板驱动表单（ngModel） #

1. 修改组件模板 #

绑定ngModel并添加输入/按键事件监听，限制最大输入长度：

<mdb-form-control>
  <input 
    id="arrivalTime" 
    mdbInput
    type="text" 
    class="form-control" 
    placeholder="--:--"
    [(ngModel)]="arrivalTime"
    (input)="formatTimeInput()"
    (keydown)="handleTimeKeydown($event)"
    maxlength="5"
  />
  <label mdbLabel class="form-label">Arrival Time</label>
</mdb-form-control>

2. 组件TS逻辑处理 #

实现格式化和光标跳转逻辑：

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

@Component({
  selector: 'app-time-input',
  templateUrl: './time-input.component.html',
  styleUrls: ['./time-input.component.css']
})
export class TimeInputComponent {
  arrivalTime = '';

  formatTimeInput(): void {
    // 过滤所有非数字字符
    let cleanValue = this.arrivalTime.replace(/\D/g, '');
    
    // 当输入长度≥2时自动插入冒号
    if (cleanValue.length >= 2) {
      cleanValue = `${cleanValue.slice(0, 2)}:${cleanValue.slice(2, 4)}`;
    }
    
    this.arrivalTime = cleanValue;
  }

  handleTimeKeydown(event: KeyboardEvent): void {
    const inputEl = event.target as HTMLInputElement;
    const cursorPos = inputEl.selectionStart;

    // 处理删除键：光标在冒号位置时，自动移除冒号并调整光标到前一位
    if ((event.key === 'Backspace' || event.key === 'Delete') && cursorPos === 2) {
      event.preventDefault();
      this.arrivalTime = this.arrivalTime.replace(':', '');
      inputEl.setSelectionRange(1, 1);
    }
  }
}

方案二：使用响应式表单（FormControl） #

如果项目用响应式表单，可通过监听控件值变化实现：

1. 修改组件模板 #

绑定formControl并添加按键事件监听：

<mdb-form-control>
  <input 
    id="arrivalTime" 
    mdbInput
    type="text" 
    class="form-control" 
    placeholder="--:--"
    [formControl]="arrivalTimeControl"
    (keydown)="handleTimeKeydown($event)"
    maxlength="5"
  />
  <label mdbLabel class="form-label">Arrival Time</label>
</mdb-form-control>

2. 组件TS逻辑处理 #

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-time-input',
  templateUrl: './time-input.component.html',
  styleUrls: ['./time-input.component.css']
})
export class TimeInputComponent implements OnInit {
  arrivalTimeControl = new FormControl('');

  ngOnInit(): void {
    // 监听控件值变化，自动格式化
    this.arrivalTimeControl.valueChanges.subscribe(val => {
      if (!val) return;

      let cleanValue = val.replace(/\D/g, '');
      if (cleanValue.length >= 2) {
        cleanValue = `${cleanValue.slice(0, 2)}:${cleanValue.slice(2, 4)}`;
      }

      // 避免循环触发值变化事件
      if (cleanValue !== val) {
        this.arrivalTimeControl.setValue(cleanValue, { emitEvent: false });
      }
    });
  }

  handleTimeKeydown(event: KeyboardEvent): void {
    const inputEl = event.target as HTMLInputElement;
    const cursorPos = inputEl.selectionStart;

    if ((event.key === 'Backspace' || event.key === 'Delete') && cursorPos === 2) {
      event.preventDefault();
      const currentVal = this.arrivalTimeControl.value || '';
      const newVal = currentVal.replace(':', '');
      this.arrivalTimeControl.setValue(newVal, { emitEvent: false });
      inputEl.setSelectionRange(1, 1);
    }
  }
}

额外优化点 #

• 可以添加输入验证：提交时检查小时（0-23）和分钟（0-59）的合法性
• 优化光标逻辑：比如用户手动移动光标到冒号后输入时，自动将数字追加到对应位置
• 支持粘贴格式化：监听paste事件，对粘贴的文本进行同样的格式化处理

内容的提问来源于stack exchange，提问作者PilotPatel