Как автоматически заменить набранное не целое число / сумму в текстовом поле на целое число / сумму?

Question

Я пытаюсь создать тип ввода, который, когда клиент вводит не целое число, автоматически изменится на ближайшее целое число. Номер ввода должен быть минимум от 10000 и максимум 5000000.

Пример:

10234 становится 10000

20345 становится 20000

Я уже ограничил его отперсонажи. Он также имеет параметр step = "10000" для клиентов, если они не хотят печатать. Это не работает, и он просто отображает примечание для ввода правильной суммы с ближайшим значением.

//Total Amount Sum Calculator
var sum = 0;

function f(val){
  sum += val;
  document.getElementById("d-total").value = sum;
}
function reset(){
  sum = 0;
  document.getElementById("d-total").value = sum;
}

//Automatic Comma
function FormatCurrency(ctrl) {
            //Check if arrow keys are pressed - we want to allow navigation around textbox using arrow keys
            if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
                return;
            }

            var val = ctrl.value;

            val = val.replace(/,/g, "")
            ctrl.value = "";
            val += '';
            x = val.split('.');
            x1 = x[0];
            x2 = x.length > 1 ? '.' + x[1] : '';

            var rgx = /(\d+)(\d{3})/;

            while (rgx.test(x1)) {
                x1 = x1.replace(rgx, '$1' + ',' + '$2');
            }

            ctrl.value = x1 + x2;
        }
//Restrict Characters (Numbers Only)
        function CheckNumeric() {
            return event.keyCode >= 48 && event.keyCode <= 57 || event.keyCode == 46;
        }

<input type="number" class="input-char-amo" id="d-total" value="10000"  step="10000" min="10000" max="5000000" onkeypress="return CheckNumeric()"/ required>

          <button type="reset" class="correction" onclick="reset()">reset</button><br>
          <div class="amount-buttons-a">
          <button type="button"  id="1" onclick="f(10000)" class="btn-amount">10000</button>
          <button type="button"  id="2" onclick="f(20000)" class="btn-amount">20000</button>
          <button type="button"  id="3" onclick="f(50000)" class="btn-amount">50000</button>
        </div>
        <div class="amount-buttons-b">
          <button type="button"  id="4" onclick="f(100000)" class="btn-amount">100000</button>
          <button type="button"  id="5" onclick="f(500000)" class="btn-amount">500000</button>
          <button type="button"  id="6" onclick="f(1000000)" class="btn-amount">1000000</button>
        </div>

Answer 1

Вы можете создать свой метод checkNumeric, но добавить его к onchange вместо onkeypress, поскольку вы хотите, чтобы он назывался после , когда пользователь сделал ввод, а не во время процесса.

Это может выглядеть так:

function checkNumeric(event) {
    event.target.value = (Math.floor(event.target.value / 10000) * 10000);
}

Возможно, вы захотите проверить NaN и другие исключения, прежде чем выполнять вычисления.