如何用JavaScript编辑7位数字的第二位数字？

Question

我正在研究ReactJS应用程序，并且输入的数据可以达到数百万。我正在使用以下函数来用逗号格式化数字：

  return Number(number).toLocaleString('en-GB', { minimumFractionDigits: 2 });

在输入的onChange道具上，我有以下阻止光标跳到结尾的方法：

        const caret = e.target.selectionStart;
        const element = e.target;
        window.requestAnimationFrame(() => {
          element.selectionStart = caret;
          element.selectionEnd = caret;
        });

[当试图以一百万个数字更改第二个数字'1,000,000'时，删除第二个零会导致光标出现在第二个数字之后而不是第一个数字之后。删除七位数的数字时，如何确保光标出现在期望的位置？

赞赏任何建议

Answer 1

  const [value, setValue] = useState("1000000");
  const displayValue = Number(value).toLocaleString("en-GB", {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  });

  const handleChange = e => {
    const oldLen = displayValue.length;
    const element = e.target;
    let rawString = element.value;
    let caret = element.selectionStart;

    // block removing decimal point
    if (caret === element.value.length - 2 && element.value.length < oldLen) {
      rawString = rawString.slice(0, caret) + "." + rawString.slice(caret);
    }

    // block removing commas
    if (displayValue.charAt(caret) === "," && rawString.charAt(caret) !== ",") {
      rawString = rawString.slice(0, caret) + "," + rawString.slice(caret);
    }

    const firstCommaAt = rawString.search(/,/g);
    const newLen = rawString.length;

    // caret position correction
    if (newLen > oldLen) {
      if (
        (firstCommaAt === 3 && caret > firstCommaAt) ||
        firstCommaAt === 4 ||
        newLen === 7
      ) {
        caret += 1;
      }
    }
    if (newLen < oldLen) {
      if (firstCommaAt === 1 && caret > firstCommaAt) {
        caret -= 1;
      }
    }

    // store parseable value
    setValue(rawString.replace(/,/g, ""));
    window.requestAnimationFrame(() => {
      element.selectionStart = caret;
      element.selectionEnd = caret;
    });
  };

  return (
    <input value={displayValue} onChange={e => handleChange(e)} />
  )

工作示例：https://codesandbox.io/s/input-with-usestate-z48s2