13.08.2021
3851
Ввод только цифр в поле input на JavaScript + вариант на HTML

Ввод только цифр в поле input на JavaScript + вариант на HTML

Поделиться
Отправить
Плюсануть
Запинить
Класснуть
Отправить
Поделиться

Сегодняшней темой нашего обсуждения является способ, благодаря которому в input мы сможем вводить только цифры. Также мы обсудим почему это важно. 

Допустим, у нас интернет-магазин, и нашему клиенту нужно ввести свой индекс. В индексе нужно вводить только цифры. Пишем input type=number. 

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

Нам же нужно сделать так, что бы это было в режиме реального времени(Real Time). Для этого нам нужен oninput. Пишем эту же функцию только в новом атрибуте, все работает! 

Теперь можно всё убрать с помощью регулярных выражений и оставить только цифры. Для этого мы пишем "const value", и заносим "e.value". Затем мы приравниваем "e.value" к "value.replace", т.е делаем замену. Далее идёт выражение "(/\D/g, ' ').

Вуаля! Теперь у нас только цифры. Нет никаких лишних символов, и всё стабильно!


Чтобы более подробно разобраться в данной теме "Ввод только цифр в поле input на JavaScript + вариант на HTML" советую посмотреть наше видео на эту тему:

Хочешь научиться создавать сайты? Изучи все на практике, с помощью интерактивных курсов у нас на проекте. Регистрация - Войти - Наши курсы. Задавайте вопросы в комментариях!
Автор данной статьи: Кирилл