Angular中Input元素清除中间内容时光标自动跳至末尾问题

当Angular项目中的input元素设置maxlength="12"后，删除输入内容的中间部分时，光标会自动跳转到输入框末尾，打断正常的编辑流程。

问题原因 #

这是Angular双向数据绑定（如[(ngModel)]）的默认行为导致的：每次输入值变化时，Angular会重新同步input的value属性，这个过程会触发浏览器将光标重置到输入框的末尾位置，忽略用户原本的光标位置。

解决方案 #

方案1：手动保存并恢复光标位置

通过监听input的input事件，在值更新前后记录并恢复光标位置：

模板代码（app.component.html）：

<input 
  type="text" 
  maxlength="12" 
  [(ngModel)]="inputValue" 
  (input)="handleInput($event)"
>

组件代码（app.component.ts）：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  inputValue = '';

  handleInput(event: Event) {
    const input = event.target as HTMLInputElement;
    // 记录当前光标位置
    const cursorPosition = input.selectionStart;
    // 同步最新输入值到组件变量
    this.inputValue = input.value;

    // 延迟恢复光标，确保Angular完成DOM更新
    setTimeout(() => {
      input.setSelectionRange(cursorPosition, cursorPosition);
    }, 0);
  }
}

方案2：直接操作原生input元素

如果不需要双向绑定，可直接通过原生DOM操作控制输入值和光标位置：

模板代码：

<input 
  type="text" 
  maxlength="12" 
  #inputRef 
  (input)="handleInput(inputRef)"
>

组件代码：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  handleInput(input: HTMLInputElement) {
    const cursorPosition = input.selectionStart;
    // 确保输入长度不超过限制（maxlength已做控制，此处可根据需求调整）
    input.value = input.value.slice(0, 12);
    // 立即恢复光标位置
    input.setSelectionRange(cursorPosition, cursorPosition);
  }
}

注意事项 #

使用setTimeout是为了避开Angular的变更检测周期，确保光标恢复操作在DOM更新完成后执行，避免被Angular的同步逻辑覆盖。

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