Ограничение ввода в текстовое поле: только цифры и точка

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

Для ограничения ввода в текстовом поле HTML, допуская только цифры и одну десятичную точку, применяйте JavaScript. Вам пригодится обработчик события onkeydown. Он проверяет, является ли введенный символ цифрой или точкой, и к тому же отсекает возможность ввода второй точки, если она уже есть в поле:

<input type="text" onkeydown="return event.key.match(/^[0-9.]$/) && !(/\./.test(this.value) && event.key === '.')">

Это решение простое и эффективное, оно обходится без создания дополнительных функций.

Расширенные решения – За пределами типов клавиш

Начальное решение работает, но что, если нам нужно что-то более сложное? Например:

Проверка в режиме реального времени с обработчиком события 'oninput'

Для непрерывного контроля изменений в текстовом поле подходит слушатель события oninput. Он учитывает ввод пользователя или вставку текста:

<input type="text" oninput="limitDecimalPlaces(event)">

function limitDecimalPlaces(e) {
  const parts = e.target.value.split('.');
  // Ограничиваем количество цифр после точки до двух
  parts[1] = parts[1].substring(0, 2);
  e.target.value = parts.join('.');
}

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

Подробнее об этом расскажет наш спикер на видео

Активная проверка – Сила предварительной валидации

Предварительная валидация необходима для сохранения целостности данных:

<input type="text" oninput="sanitizeInput(this)">

Она помогает предотвратить ошибочный ввод еще до того, как он станет видимым.

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

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

Бассейн клавиатуры 🏊‍♂️
Зачетный заплыв: 0️⃣ 1️⃣ 2️⃣ 3️⃣ 4️⃣ 5️⃣ 6️⃣ 7️⃣ 8️⃣ 9️⃣ & 🌟 (десятичная точка).

Наглядная иллюстрация того, какие символы допустимы в нашем текстовом поле.

Опыт пользователя – свыше предотвращения

Важно не просто избежать ошибки ввода, а также дать пользователю обратную связь.

Тонкие подсказки на экране

Применение события onkeyup для изящного изменения цвета границы текстового поля в процессе ввода текста помогает не отвлекать пользователя и тактично указывать на ошибки.

Явные сообщения об ошибках

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

Валидация данных при отправке с использованием Regex

Для окончательной валидации данных перед отправкой на сервер используйте:

<form onsubmit="return validateFormOnSubmit(this)">
  <input type="text" name="numericInput">
  <input type="submit">
</form>

Это обеспечивает детальную проверку введенной информации.

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

1. <input>: Элемент ввода (формы) – HTML: Язык разметки гипертекста | MDN – Подробная документация по элементу <input>.
2. Справочник по RegExp JavaScript – Ресурс для изучения регулярных выражений в JavaScript.
3. HTML атрибут: pattern – HTML: Язык разметки гипертекста | MDN – Инструкция по использованию атрибута pattern для валидации ввода.
4. HTML DOM Объект события – Информация для понимания работы объекта события в управлении событиями пользователя.
5. Number.prototype.toLocaleString() – JavaScript | MDN – Форматирование чисел для удобства пользователей.
6. EventTarget: метод addEventListener() – Веб-API | MDN – Информация о добавлении слушателей событий.
7. javascript – HTML текстовое поле, допускающее только числовой ввод – Stack Overflow — Дискуссионная платформа, на которой обсуждаются различные методы ограничения ввода.