如何在Angular的keypress/keydown事件中获取光标（插入符）位置

用户提供的代码：

@HostListener('keypress', ['$event']) disableKeys = (e: KeyboardEvent): any => {
  const currentValue: string = (<HTMLInputElement>e.target).value || '';
  const nextValue = `${currentValue}${e.key}`;
  // only allow to enter integer numbers or decimal up to 4 positions
  const regex = /^\d+(\.\d{0,4})?$/;

  if (nextValue && !regex.test(String(nextValue))) {
    e.preventDefault();
  }
};

问题场景：
在number类型输入框中，用户可能在数字开头或中间插入新数字，但当前代码总是将按键值拼接到末尾，导致错误的验证逻辑。例如：

• 输入框内容为333|444（|表示光标位置），输入新数字时，代码会生成333444[新数字]而非333[新数字]444
• 当输入4位小数后，将光标移到开头输入整数时，会错误触发preventDefault()

要解决这个问题，需要先获取光标在输入框中的位置，模拟将新字符插入到光标位置后的完整值，再进行正则验证。具体修改如下：

@HostListener('keypress', ['$event']) disableKeys = (e: KeyboardEvent): any => {
  const inputEl = e.target as HTMLInputElement;
  const currentValue: string = inputEl.value || '';
  const key = e.key;

  // 过滤非数字和小数点的按键
  if (!/^\d|\.$/.test(key)) {
    e.preventDefault();
    return;
  }

  // 获取光标起始/结束位置，支持处理选中文本替换的场景
  const startPos = inputEl.selectionStart;
  const endPos = inputEl.selectionEnd;
  
  // 生成插入字符后的真实输入值
  const nextValue = currentValue.substring(0, startPos) + key + currentValue.substring(endPos);

  // 验证规则：整数或最多4位小数
  const regex = /^\d+(\.\d{0,4})?$/;

  if (!regex.test(nextValue)) {
    e.preventDefault();
  }
};

关键说明：

• 通过inputEl.selectionStart和inputEl.selectionEnd精准获取光标位置，覆盖“光标插入”和“选中文本替换”两种场景
• 按真实输入逻辑拼接nextValue后再验证，避免了之前“强制拼到末尾”的错误判断
• 提前过滤无效按键，减少不必要的验证流程

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