Как ограничить ввод только цифрами, точкой и клавишей Backspace в JavaScript?

Оффтоп javascript
1

Привет всем! У меня возникла проблема с валидацией ввода в числовое поле. Хочу разрешить только цифры, одну точку и клавишу Backspace. Вот мой код:

$('input[type="number"]').on('keydown', function(event) {
  const allowedChars = /^[0-9\b.]$/;
  const key = String.fromCharCode(event.keyCode || event.which);

  if (!allowedChars.test(key)) {
    event.preventDefault();
  }

  if (key === '.' && this.value.includes('.')) {
    event.preventDefault();
  }
});

Но что-то не работает как надо. Точка все равно не вводится, хотя цифры проходят. Может, проблема в регулярке? Кто-нибудь может подсказать, где ошибка? Буду благодарен за помощь!

2

Попробуй использовать регулярку /[1]+$/ для проверки ввода. А для ограничения точки можно сделать так:

if (e.key === ‘.’ && this.value.indexOf(‘.’) > -1) {
e.preventDefault();
}

Еще советую добавить проверку на Backspace отдельно:

if (e.key === ‘Backspace’) return;

Так точно будет работать. Удачи с кодом!

  1. 0-9. ↩︎

3

Проблема в том, что String.fromCharCode() не работает корректно с keyCode для спецсимволов. Лучше использовать event.key:

$('input[type="number"]').on('keydown', function(event) {
  if (!/^[0-9.]$/.test(event.key) && event.key !== 'Backspace') {
    event.preventDefault();
  }
  
  if (event.key === '.' && this.value.includes('.')) {
    event.preventDefault();
  }
});

Так будет работать и для точки, и для Backspace. Еще можно добавить проверку на максимальное количество знаков после точки, если нужно.

4

Хм, а я вот недавно столкнулся с похожей задачкой. В итоге решил немного по-другому подойти. Использовал input type=‘text’ вместо number, и добавил data-атрибут для максимального количества знаков после точки. Примерно так:

$(‘input[data-decimal-places]’).on(‘input’, function() {
let value = this.value.replace(/[^0-9.]/g, ‘’);
const parts = value.split(‘.’);
if (parts[1]) parts[1] = parts[1].slice(0, this.dataset.decimalPlaces);
this.value = parts.join(‘.’);
});

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