Angular实现输入框更新时保持光标位置不变

背景与需求 #

我正在开发Angular项目的自定义UI组件，其中需要实现一个支持小数的数字输入框，要求：

• 用千位分隔符和小数分隔符做格式化，保证视觉美观
• 聚焦输入时实时执行格式化，而不是等失焦后才处理

遇到的问题 #

格式化数值本身不难，用Angular的DecimalPipe就能搞定，但遇到了一个影响体验的问题：通过单向绑定更新输入框值的时候，光标会自动跳到内容的末尾。举个例子：输入数字会自动转成en-US格式，把光标移到内容左侧某位置输入新数字，内容更新是对的，但光标直接跳到了末尾，打断了正常的输入节奏。

解决方案（感谢@Eliseo） #

后来在社区大佬的提示下，通过自定义指令解决了这个问题，核心思路是在格式化前后记录并恢复光标位置，关键逻辑在mask.directive.ts中：

1. 先监听输入框的input事件，在处理格式化前记录当前光标位置：

   const start = this.el.nativeElement.selectionStart;
   const end = this.el.nativeElement.selectionEnd;
   

2. 对输入值进行格式化处理（这里可以用DecimalPipe或者自定义的格式化函数）
3. 计算格式化后光标应该在的位置——需要考虑新增的分隔符（比如逗号）对光标位置的影响，比如原光标位置在第2位，格式化后因为多了一个逗号，位置要加1
4. 更新输入框的值后，立即恢复光标位置：

   this.el.nativeElement.setSelectionRange(newStart, newEnd);
   

通过这个方式，就能实现实时格式化的同时，让光标保持在用户输入的位置，不会乱跑啦。

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