Как при вводе в 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;
}
Комментариев нет:
Отправить комментарий