@spiridonov1

Есть ли альтернатива input type="number" для показа цифровой клавиатуры на смартфоне?

Дело в том, что браузеры начинают по особому обрабатывать ввод в поле с type="number". И если специальные браузерные стили как то можно отключить:

/* Удаляем стрекли для ячеек с type number в Chrome. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Удаляем стрекли для ячеек с type number в Firefox. */
input[type="number"] {
    -moz-appearance: textfield;
}
/* Удаляем красную рамку для ячеек с type number в Firefox. */
input:invalid {
    box-shadow: none;
}


То как отключить валидацию браузера? Например браузер не учитывает ввод текста в такие ячейки.

https://jsfiddle.net/oxy2ja2t/

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

https://jsfiddle.net/fm7ap1vz/

В итоге решение с type="number" нужное только для показа цифровой клавиатуры на смартфоне несёт в себе кучу проблем. Подскажите пожалуйста альтернативный способ для показа цифровой клавиатуры на смартфоне или как мне убрать валидацию браузера. Большое спасибо.

PS Можно было бы использовать type="tel", но мне нужна десятичная точка при вводе со смартфона, а с type="tel" она отсутствует.
  • Вопрос задан
  • 1679 просмотров
Пригласить эксперта
Ответы на вопрос 1
trushka
@trushka
Можно определять по юзерагенту мобильные устройства и задавать для них type="number". Можно на сервере, можно javascript'ом..
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы