React中移除千分符后点击输入框光标向右跳转问题的解决方案咨询

我完全懂你碰到的这个糟心问题——点击带千分符数字的中间位置（比如1,234里2和3之间），移除千分符后光标直接跳去了3和4之间，这是因为你直接复用了移除前的光标索引，但移除千分符后字符串长度变短了，原来的索引对应的位置自然就跑偏了。

问题根源 #

拿1,234举个具体的例子：原字符串的字符索引是0:1、1:,、2:2、3:3、4:4，当你点击2和3之间时，selectionStart的值是3。但移除千分符后字符串变成1234，索引变成0:1、1:2、2:3、3:4，这时候把光标设为3，就跑到了3和4之间，完全不是你想要的位置。

解决方案 #

核心思路是：计算原光标位置之前有多少个千分符（逗号），然后用原光标位置减去这个数量，就能得到移除千分符后的正确光标位置。

修改后的代码如下：

const onClickHandler = (event: any) => { 
  const numberString = String(event.target.value); 
  if (numberString.length > 0) { 
    const number = formattedNumber.parse(numberString, language); 
    if (isNaN(number)) { 
      return; 
    } 
    // 先记录原光标位置，并计算光标前的千分符数量
    const originalCursor = event.target.selectionStart;
    const commasBeforeCursor = numberString.slice(0, originalCursor).split(',').length - 1;
    
    value = formattedNumber.removeGrouping(numberString, language); 
    const element = event.target; 
    
    window.requestAnimationFrame(() => { 
      // 用原光标位置减去前面的千分符数量，得到正确位置
      const correctedCursor = originalCursor - commasBeforeCursor;
      element.selectionStart = correctedCursor; 
      element.selectionEnd = correctedCursor; 
    }); 
    setValue(value); 
  } 
};

代码解释 #

1. 统计千分符数量：通过slice(0, originalCursor)截取光标前的子串，再按逗号分割成数组，数组长度减1就是光标前的千分符总数。
2. 修正光标位置：原光标位置减去千分符数量，就是移除千分符后的正确光标位置。比如之前的例子，光标前有1个逗号，3-1=2，正好对应1234中2和3之间的位置，完全符合预期。

这个方法还能兼容多千分符的场景，比如123,456,789，不管你点击哪个位置，都能精准计算出正确的光标位置。

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