Замена точки с помощью JavaScript вместо этого удаляет все

Ответ 1

Я думаю (догадываясь), потому что вы используете type="number". Затем цифры, за которыми следует точка, например, 123., не являются допустимым числом, а val возвращает пустое.

Вместо этого вы можете попробовать:

$("[data-input-payment-id]").on("keyup", function(e) {
  var test_value = this.value.replace(/[^\d,]/g, "");
  $(this).val(test_value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input data-input-payment-id="12">

Ответ 2

На самом деле это не решение, которое я лично хотел бы увидеть, но вот что я сделал для решения этой проблемы. Я изменил код JavaScript, чтобы прослушать код 46 (.), И я возвращаю false на прослушиватель событий вставки, чтобы отключить вставку значения во вход.

$("[data-input-payment-id]").on("keypress", function(e) {
  var key = e.charCode ? e.charCode : e.keyCode;
  if (key == 46) {
    return false;
  }
});
$("[data-input-payment-id]").on("paste", function(e) {
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" data-input-payment-id="12">

Ответ 3

Я мог бы:

• Вместо события keyup прослушайте input событие. Таким образом, вы также можете разрешить вставку.
• Сохраните запись о предыдущем правильном значении, чтобы вы могли вернуться к нему. Это необходимо, потому что input type=number будет иметь пустую строку как значение, как только вход становится недействительным (как число). Я бы сохранил это предыдущее правильное значение в свойстве данных input элемента
• С использованием свойства validity.stepMismatch вы можете узнать, нарушает ли текущее значение свойство step input которое по умолчанию равно 1. С шагом 1 это означает, что ввод числа с десятичным разделителем будет считаться несоответствием,
• Поскольку конечный десятичный разделитель не покажет дробное число, он будет проходить вышеупомянутую проверку. Поэтому возвращайте значение обратно на вход, когда все в порядке: это устранит любой разделитель с разделителями в конце, который мог быть введен в ключ.

$("[data-input-payment-id]").on("input", function (e) {
    if (!this.validity.stepMismatch) {
        $(this).data("lastValid", $(this).val());
    };
    $(this).val($(this).data("lastValid") || "");  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number"data-input-payment-id="12">

Ответ 4

Ваш пример Keypress дал мне эту идею. Если вы можете перехватить событие нажатия клавиши, можно проверить любую проверку перед добавлением фактического значения. Этот пример также не требует каких-либо условных условий и способен фильтровать любое нецифровое значение.

$("[data-input-payment-id]").on("keypress", function(e) {
  if ((this.value + e.key).match(/\D/)) {
    return false;
  }
});
$("[data-input-payment-id]").on("paste", function(e) {
  var pasteData = (e.originalEvent.clipboardData || window.clipboardData).getData('text');
  pasteData = pasteData.replace(/\D/g, '');
  this.value = this.value + pasteData;
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" data-input-payment-id="12">

Ответ 5

См. Документы MDN при input number типа:

Значение

Число, представляющее число, или пустое

Если входная строка не может быть преобразована в правильный номер - например, если строка содержит две точки, то доступ к свойству .value вернет пустую строку.

Функция .value (и val()) по-прежнему будет возвращать строки, но эти строки должны представлять допустимые числа (или быть пустой строкой). Вместо того, чтобы безошибочно устанавливать значение элемента, просто проверьте, не указало ли сначала значение пустой строки:

$("[data-input-payment-id]").on("keyup", function(e) {
  const val = $(this).val();
  if (val === '') return;
  var test_value = $(this).val().replace(/\./g, "");
  $(this).val(test_value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" data-input-payment-id="12">

Ответ 6

$(this).val() возвращает пустую строку, если вход с type="number" имеет более одного .

Вы можете исправить это, только выполнив замену значения, если $(this).val() не возвращает пустую строку.