如何编辑 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

如何编辑 Javascript 中 7 位数的第二位数字？

How to edit second digit of a 7 figure number in Javascript?

number-formatting

reactjs