HTML текстовое поле ввода: разрешить только числовой ввод

Ваш код выглядит неплохо, но есть пара моментов, которые можно улучшить. Вот, как можно реализовать валидацию для текстового поля <input> так, чтобы оно принимало только цифры и точку.

1. Вы используете событие onkeypress, что может быть не лучшим выбором, так как оно не срабатывает при вставке текста. Вместо этого лучше использовать событие input.
2. Также следует корректнее обрабатывать вставку данных.

Вот пример исправленного кода:

<input type='text' oninput='validate(event)' />

<script>
function validate(evt) {
  // Получаем текущее значение поля
  var value = evt.target.value;

  // Обрезаем все символы, которые не являются цифрами или точкой
  var regex = /^[0-9.]*$/;
  if (!regex.test(value)) {
    // Убираем последний введённый символ, если он не соответствует регулярному выражению
    evt.target.value = value.slice(0, -1);
  }
}
</script>

В этом варианте:

• Используется событие oninput, которое срабатывает при любом изменении поля, в том числе при вставке текста.
• Логика валидации стала проще: мы просто проверяем всё значение поля на соответствие определенному регулярному выражению. Если в введённом значении есть недопустимые символы, то мы удаляем последний символ.

Если вы хотите, чтобы пользователь мог вводить только одно числовое значение с плавающей точкой, можно дополнительно улучшить регулярное выражение. Надеюсь, это поможет!

Вот простое решение, которое позволяет вводить ровно одну десятичную точку, но не больше. Событие oninput использует регулярные выражения для замены текста в процессе ввода, основываясь на двух правилах:

1. Удалить всё, что не является цифрой или точкой.
2. Удалить вторую и последующие точки.

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" />

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

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/^0[^.]/, '0');" />

Это позволит вводить значения 0.123 или .123, но запретит ввод 0123 или 00.123.

Я долго искал хороший ответ на этот вопрос, и нам действительно нужно <input type="number", но пока этого нет, я нашёл два компактных решения:

Первый вариант:

<input type="text" 
       onkeyup="this.value=this.value.replace(/[^\d]/,'')">

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

<input type="text" 
       onkeydown="return ( event.ctrlKey || event.altKey 
                           || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) 
                           || (95<event.keyCode && event.keyCode<106)
                           || (event.keyCode==8) || (event.keyCode==9) 
                           || (event.keyCode>34 && event.keyCode<40) 
                           || (event.keyCode==46) )">

Надеюсь, это поможет!

Большинство ответов здесь имеют один и тот же недостаток — использование событий клавиатуры.

Многие из представленных решений ограничивают возможности по выделению текста с помощью макросов клавиатуры, а также могут вызывать нежелательное поведение при копировании и вставке. Другие решения, как правило, зависят от конкретных плагинов jQuery, что можно сравнить с "убиением мух пулеметом".

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

function forceNumeric(){
    var $input = $(this);
    $input.val($input.val().replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input[type="number"]', forceNumeric);

HTML5 поддерживает регулярные выражения, поэтому вы можете использовать следующее:

<input id="numbersOnly" pattern="[0-9.]+" type="text">

Предупреждение: некоторые браузеры еще не поддерживают эту возможность.