Html input ввод только цифр

Есть поле Вешаю на него событие:

В итоге при вводе буквы её видно на мгновение, а потом она убирается. Как сделать чтобы её не было видно? Так же ещё и «.» надо.

5 ответов 5

Всё, что вам нужно это:

В случае, если вдруг это не подходит, ответ на eng.SO. Мне больше всего понравился вариант:

And this script:

Можно просто запретить ввод ненужных символов — например, только цифры и точки:

Часто возникает задача запрета ввода нецифровых значений в поле . В этой статье разберем реализацию данного механизма на jQuery.

На мой взгляд, самый простой способ воспользоваться обработчиком события .keydown(). Итак, предположим у нас есть текстовое поле с >

Валидация input с помощью HTML, JavaScript, а также стилизация верно и не верно заполненного поля ввода.

Валидация input с помощью HTML

Для этой задачи воспользуемся атрибутом pattern . При использовании такого подхода, обязательно нужно сообщить пользователю в каком формате необходимо вводить в данное конкретное поле (с помощью label и/или title )

После ввода нажмите enter , чтобы посмотреть как будет вести себя форма при попытке отправки её пользователем.

Для составления более сложных паттернов необходимо хорошо знать регулярные выражения

Более сложный пример: валидация номера телефона

Валидация input с помощью JavaScript

Теперь будем проверять правильность ввода с помощью JavaScript. С таким подходом можно более оперативно оповещать пользователя о неверном вводе. Повешаем на событие keyup функцию проверки правильности ввода

Разрешим ввод только цифр

Первый аргумент метода replace() — это регулярное выражение (шаблон, по которому будем делать проверку), второй — пустая строка ‘ ‘ . Т.е. при соответствии заданного шаблона мы очищаем недопустимые символы.

  • d — только цифры
  • ^ — инверсия, т.е. получается ^d — не цифры
  • /g — флаг глобальный поиск
Читайте также:  Таблица квадратов двузначных чисел в excel

Т.о., пользователь не сможет ввести отличный от цифр символ.

Введите любое число

Используя регулярные выражения можно задать абсолютно любой шаблон для input.

Стилизация верного и неверного поля ввода.

В основном комбинированием каких-то из этих трёх свойств мы оповещаем пользователя о возможности дальнейшей отправки формы.

Верный ввод при фокусе

НЕверный ввод при фокусе

Верный ввод при фокусе обязательного input

НЕверный ввод при фокусе обязательного input

Достаточно гибко можно стилизовать поля для ввода.

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.