input поле только для цифр html
В итоге при вводе буквы её видно на мгновение, а потом она убирается. Как сделать чтобы её не было видно? Так же ещё и «.» надо.
Отслеживать
12.8k 4 4 золотых знака 32 32 серебряных знака 61 61 бронзовый знак
задан 8 фев 2017 в 12:23
573 1 1 золотой знак 5 5 серебряных знаков 19 19 бронзовых знаков
8 ответов 8
Сортировка: Сброс на вариант по умолчанию
Всё, что вам нужно это:
В случае, если вдруг это не подходит, ответ на eng.SO. Мне больше всего понравился вариант:
And this script:
function validate(evt) < var theEvent = evt || window.event; var key = theEvent.keyCode || theEvent.which; key = String.fromCharCode( key ); var regex = /[0-9]|\./; if( !regex.test(key) ) < theEvent.returnValue = false; if(theEvent.preventDefault) theEvent.preventDefault(); >> Отслеживать
ответ дан 8 фев 2017 в 12:45
Sasha Omelchenko Sasha Omelchenko
12.8k 4 4 золотых знака 32 32 серебряных знака 61 61 бронзовый знак
ОТЛИЧНЫЙ ВАРИАНТ. Подскажите, как добавить в этот скрипт ограничение максимального и минимального числа в input? Мне нужен диапазон 1-255. При вводе 300, например, — сброс значения на 255. При вводе 0 — сброс на 1. Заранее спасибо.
8 мар 2020 в 15:02
Можно просто запретить ввод ненужных символов — например, только цифры и точки:
$(".ss").keypress(function(event) < event = event || window.event; if (event.charCode && event.charCode!=0 && event.charCode!=46 && (event.charCode < 48 || event.charCode >57) ) return false; >);Отслеживать
ответ дан 8 фев 2017 в 12:47
5,542 2 2 золотых знака 20 20 серебряных знаков 41 41 бронзовый знак
точку или запятую нельзя.
8 фев 2017 в 12:49
@SashaOmelchenko ну так все желаемые символы можно добавить. отредактировал для цифр и точки
8 фев 2017 в 12:55
Проще всего эту задачу решить через event ‘input’. Он используется в чисто в (vamilla js). Аналога, к сожалению, в jq нет. Вот код, который решит эту задачку.
p.s. я немного доработал регулярку
document.querySelector('.ss').addEventListener('input', function(e) < this.value = this.value.replace(/[^\d.]/g, ''); >) Автор ответа: Гайк Инанц, преподаватель HackerU
Ввод только цифр в поле 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» советую посмотреть наше видео на эту тему:
Хочешь научиться создавать сайты? Изучи все на практике, с помощью интерактивных курсов у нас на проекте. Регистрация — Войти — Наши курсы. Задавайте вопросы в комментариях!
Поле для ввода чисел:
name имя ключа параметра value значение ключа параметра, которое может содержать: цифры «0-9», один плюс «+» или минус «-», один символ «e» или «E», одну точку «.». Можно ввести буквы, но форма не будет отправлена при нажатии на кнопку submit , а покажет сообщение об ошибке. Чаще всего не задаётся. Пользователь может его изменить, если не указаны атрибуты readonly и disabled . readonly заблокировано изменение пользователем disabled заблокированы доступ, изменение пользователем и передача данных текущего параметра required поле не может быть пустым step
step=20
step=any шаг изменения, который может быть положительным целым или дробным числом. Значение value кратно значению step , то есть делится на него без остатка. Пример разрешённых значений value при step=»20″ : …, -40, -20, 0, 20, 40, …. По умолчанию равен 1 . То есть покажет ошибку, если ввести десятичную дробь. Для того, чтобы убрать ограничения, нужно присвоить any . min минимально возможное значение value , необходимое для отправки формы max максимально возможное значение value , необходимое для отправки формы placeholder подсказка-заглушка title всплывающая подсказка при наведении курсора мышки autocomplete автозаполнение. Можно его отключить или сделать более конкретизированным. list список рекомендованных значений autofocus фокус поля (то есть период между щелчком по элементу и щелчком вне элемента) получен при загрузке документа
Поле не подходит для текстовых строк, состоящих из 16 и более цифр, например, номера пластиковой карты, так как длинные числа от 9007199254740991 могут округляться.
Количество товара
- увеличение и уменьшение значения числового поля с помощью кнопок пошагового изменения,
- сообщение об ошибки при вводе букв и дробных чисел,
- минимальное значение 1.
Чётные положительные целые числа
Нечётные положительные целые числа
Как сделать чтобы в input можно было вводить только цифры
Часто возникает задача запрета ввода не цифровых значений в поле . В этом материале разберем реализацию данного механизма на JavaScript.
На мой взгляд, самый простой способ воспользоваться обработчиком события .keydown() — в jQuery или прослушивать событие keydown. Итак, предположим у нас есть текстовое поле с >
Алгоритм проверки будет такой
- При нажатии клавиши на клавиатуре ( событие .keydown() ) будем получать keyCode (возвращает код нажатой клавиши) и анализировать его;
- Для цифр основной клавиатуры keyCode принимает значения от 48 (клавиша 0) до 57 (клавиша 9);
- Для цифр дополнительной клавиатуры ( Num-клавиатуры ) keyCode принимает значения от 96 (клавиша 0) до 105 (клавиша 9);
- Так же разрешим:
- удалять символы ( клавиша Del ) keyCode == 46;
- переключаться клавишей Tab между полями keyCode == 9;
- нажимать Backspace keyCode == 8;
- нажимать Esc keyCode == 27;
- выделять текст сочетанием Ctrl + A — вот тут клавиша A имеет код keyCode == 65, а событие зажатого Ctrl ctrlKey должно быть строго истина, т.е. получаем условие — ( event.keyCode == 65 && event.ctrlKey === true );
- разрешим клавишу Home keyCode == 36;
- разрешим клавишу End keyCode == 35;
- разрешим клавишу влево keyCode == 37;
- разрешим клавишу вправо keyCode == 39;
Разрешаем ввод только цифр в поле input на JavaScript
const input = document.getElementById('only_num'); input.addEventListener('keydown', function(event) < // Разрешаем: backspace, delete, tab и escape if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || // Разрешаем: Ctrl+A (event.keyCode == 65 && event.ctrlKey === true) || // Разрешаем: home, end, влево, вправо (event.keyCode >= 35 && event.keyCode else < // Запрещаем все, кроме цифр на основной клавиатуре, а так же Num-клавиатуре if ((event.keyCode < 48 || event.keyCode >57) && (event.keyCode < 96 || event.keyCode >105 )) < event.preventDefault(); >> >);
Разрешаем ввод только цифр в поле input на jQuery
$(document).ready(function() < $("#only_num").keydown(function(event) < // Разрешаем: backspace, delete, tab и escape if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || // Разрешаем: Ctrl+A (event.keyCode == 65 && event.ctrlKey === true) || // Разрешаем: home, end, влево, вправо (event.keyCode >= 35 && event.keyCode else < // Запрещаем все, кроме цифр на основной клавиатуре, а так же Num-клавиатуре if ((event.keyCode < 48 || event.keyCode >57) && (event.keyCode < 96 || event.keyCode >105 )) < event.preventDefault(); >> >); >);