Страницы

Поиск по вопросам

четверг, 21 марта 2019 г.

Как открыть цифровую клавиатуру на телефоне при вводе в input type=“text”?

Как при вводе в input type="text" открыть на мобильных цифровую клавиатуру? Или при вводе в input type="number" ограничить всё, кроме ввода цифр и запятой? Проблем в том, что при наличию точки в конце без десятичного знака, input возвращает пустоту. Я пробовал биндить регулярки, но input type="number" вообще не реагирует на них.
Мб я вообще неправильное решение ищу? Мне нужно, чтобы при вводе цифр десятичного числа на телефоне, открывалась цифровая клавиатура и всё правильно считалось — при вводе "45." на расчёт шло "45", а не "". Причём я заметил что input type="number" пропускает точку, запятую и цифры, вот когда используется запятая, всё окей — то есть, при вводе "45," в расчёт идёт "45", а при вводе "45." в расчёт "" и результат 0.


Ответ

Поскольку при вводе input[type=number] ведёт себя не совсем адекватно при вводе точки, предлагаю вот такой костыль с input[type=hidden]. При сабмите формы берите значение из него — там всегда будет храниться нужное значение.
Немного объяснений по коду:
При событии keydown отлавливаем нажатие на точку или дробную часть (у точки на нампаде другой код) и записываем в input[type=hidden] текущее значение + точку. Также отлавливаем бекспейс + проверяем — есть ли точка в предпоследнем символе в input[type=number], и если есть, то удаляем цифру после точки. Событие keyup срабатывает уже после того, как символ появился в input[type=number] и, если его значение true, то добавляем его в input[type=hidden]. Если оно равно false + была нажата клавиша бекспейс + старое значение input[type=hidden] содержит один символ, то значит мы стерли все символы и input[type=hidden] надо приравнять пустому значению. Эти же действия дублируются на ивент input, чтобы можно было вводить значение стрелочками или колесом мыши.
var input = document.querySelector('input[type=number]'), hidden = document.querySelector('input[type=hidden]'), output = document.querySelector('output'); input.addEventListener('keydown', function(e) { if (e.keyCode === 110 || e.keyCode === 190) { hidden.value = e.target.value + '.'; } else if (e.keyCode === 8 && e.target.value.slice(-2, -1) === '.') { hidden.value = hidden.value.slice(0, -1); } }); input.addEventListener('keyup', inputProcess); input.addEventListener('input', inputProcess); function inputProcess(e) { if (input.value) { hidden.value = input.value; } else if (!input.value && e.keyCode === 8 && hidden.value.length === 1) { hidden.value = ''; } output.innerHTML = hidden.value; }

Комментариев нет:

Отправить комментарий