Ограничение ввода в HTML: только числа и точка

Быстрый ответ

Чтобы ограничить ввод в текстовые поля HTML только числами, можно использовать определённые атрибуты. Для этого можно применить следующий фрагмент кода:

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

Здесь используется событие oninput для автоматического и непрерывного удаления символов, которые не являются числовыми. Это достигается с помощью JavaScript и регулярного выражения (/[^0-9]/g), заменяющего нечисловые символы пустыми строками. Таким образом, реализуется проверка на числовой ввод в реальном времени, не связанная с отправкой формы или другими проверками.

Полный контроль над числовым вводом: что, зачем и как

Проверка на серверной стороне: доверять ли клиентскому коду

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

Десятичные точки и начальные нули: проблемы ввода

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

this.value = this.value.replace(/[^0-9.]|(?<=\..*)\./g, '')
                       .replace(/^0+/, '0')
                       .replace(/^0(?=[1-9])/, '');

Этот код предотвращает ввод более чем одной десятичной точки и корректирует ситуацию с начальными нулями, сохраняя значения типа 0.123 без изменений, в то время как число 000123 преобразуется в более компактную форму 0123.

Использование возможностей HTML5

Магия элемента <input type="number">

Учтите возможность заменить <input type="text"> на <input type="number"> для использования встроенных в HTML5 средств проверки корректности ввода. Однако будьте осторожны, так как поведение браузера может быть непредсказуемым.

Запутывающие различия браузеров

В мире браузерных различий каждый из них имеет свои особенности: Chrome, пусть и неохотно, допускает символы 'e' и 'E' в type="number" как экспоненциальный ввод, в то время как Firefox и Edge могут позволить вводить совершенно иные нечисловые символы.

Искусство создания лучшего пользовательского опыта

Ради удобства пользователей добавьте атрибут required к полям, которые не должны быть пустыми. Используйте valueAsNumber для получения числового значения и таким образом избегайте обычного преобразования строк в JavaScript:

<input type="number" required oninput="this.valueAsNumber = this.validity.badInput ? '' : this.valueAsNumber">

Визуализация

Представьте себе лифт, где есть кнопки для каждого этажа. Но в нашем случае этот лифт предназначен только для перехода на числовые этажи:

Панель лифта: [1, 2, 3, ... N]

Когда кто-то пытается нажать на нечисловой этаж, например 'A' или '#':

Ввод: A   Ввод: #
Результат: 🚫   Результат: 🚫

Только числовые значения на вход:
"1" -> 🆗    "3" -> 🆗
"A" -> 🚫    "#" -> 🚫

Такое поведение можно сравнить с панелью кнопок лифта, которая мгновенно отклоняет любую кнопку, не относящуюся к числу. Можно сказать, это довольно занимательно!

Точно также и ваше HTML поле ввода должно демонстрировать подобное поведение:

Ввод "123"  -> Отображается "123"
Ввод "1e4"  -> Отображается "1" // Они говорили, что я мог стать кем угодно, так что я стал "1" 🌟
Ввод "12x5" -> Отображается "125"

Только числовые значения допустимы при вводе – прямо как на нашей адаптивной панели кнопок лифта.

Дополнительные возможности и способы их реализации

Клиент должен получить сразу же ответ при неправильном вводе: ведь каждый хочет знать правду

Организуйте пользователей мгновенной обратной связью и, возможно, настраиваемым сообщением, когда они вводят неправильные символы. Для этого можно использовать методы .classList и setCustomValidity:

function validateInput(input){
  if (input.validity.patternMismatch){
    input.classList.add('input-error'); // Предположим, что класс `.input-error` стилизован с вызовом – насыщенный и ярко выраженный, как в 80-х! 💅
    input.setCustomValidity('Допустимы только числовые значения.');
  } else {
    input.classList.remove('input-error'); // Почему мне безразличен твой стиль?
    input.setCustomValidity('');
  }
  input.reportValidity();
}

Помощь со стороны JSFiddle

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

Обработка клавиш в зависимости от ситуации

Обработайте более сложные сценарии, добавив обработчики событий к keydown, keypress, и keyup. Специальные клавиши, такие как Backspace, Стрелки, и Tab, требуют особого учета и, следовательно, их обработка должна быть специфической.

function setInputFilter(inputElement, inputFilter) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextMenu", "drop"].forEach(function(event) {
    inputElement.addEventListener(event, function() {
      if (inputFilter(this.value)) { // Когда стучит полночь
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if(this.hasOwnProperty("oldValue")) { //О, были времена, мой старый друг
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      }
    });
  });
}
// Пример использования функции
setInputFilter(document.getElementById("myNumericInput"), function(value) {
  return /^\d*\.?\d*$/.test(value); // Вот в чём вопрос – быть числом или не быть числом
});

Тайные записи клавиш: история в цифрах

Также важно учесть keycodes и ограничить числовой ввод таким образом, чтобы ввод был возможен как с обычной клавиатуры, так и с числовой панели:

function isNumericKeyEvent(event) {
  let key = event.keyCode; // Это не просто номер, это идентификация.
  return ((key >= 48 && key <= 57) || // Симпатяги SБлашников
          (key >= 96 && key <= 105)); // Вечеринка на числовой панели 
}

inputElement.addEventListener('keydown', function(event) {
  if (!isNumericKeyEvent(event)) { // "Извините, вы не в списке. Вход в клуб запрещён!"
    event.preventDefault();
  }
});

Полезные материалы

1. <input>: The Input (Form Input) element – HTML: HyperText Markup Language | MDN — повсесторонний руководитель и список ссылок по поведению и атрибутам элемента <input>.
2. HTML Input Attributes – W3Schools — демонстрация примеров атрибутов ввода, включая проверку на числовой ввод.
3. HTML Standard – WHATWG — золотой стандарт, подробно описывающий поведение типов ввода, включая числовые типы.
4. javascript – HTML text input allow only numeric input – Stack Overflow — сборник решений и дискуссия по вопросу ввода лишь числовых значений в текстовые поля HTML.
5. GitHub – RobinHerbots/Inputmask: Input Mask plugin — мощный плагин библиотеки для создания масок ввода, включая числовые форматы.
6. HTMLElement: input event – Web APIs | MDN — обучающий материал, посвящённый событию input, которое важно для динамической проверки корректности ввода.
7. Regular expressions – JavaScript | MDN — исчерпывающий справочник по регулярным выражениям, мастерам, которые помогают проверить ввод на соответствие определённому паттерну.