Как отредактировать второй ди git из 7-значного числа в Javascript? - PullRequest
Новая
       8

Как отредактировать второй ди git из 7-значного числа в Javascript?

0 голосов
/ 03 февраля 2020

Я работаю над приложением 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', удаление второго нуля приводит к появлению курсора после второй цифры вместо первой цифры. Как я могу убедиться, что курсор появляется в ожидаемой позиции при удалении цифр в семизначном номере?

Оцените любой совет

1 Ответ

0 голосов
/ 04 февраля 2020 
  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

...