Как заставить клавиатуру с цифрами на мобильном сайте в Android

У меня есть мобильный веб-сайт, на котором есть некоторые HTML- inputэлементы, например:

<input type="text" name="txtAccessoryCost" size="6" />

Я встроил сайт в приложение WebViewдля возможного использования Android 2.1, так что он также будет приложением для Android.

Можно ли получить клавиатуру с цифрами вместо клавиатуры по умолчанию с буквами, когда этот inputэлемент HTML находится в фокусе?

Или можно ли установить его для всего приложения (может быть, что-то в файле манифеста ), если это невозможно для элемента HTML?

<input type="number" />
<input type="tel" />

Оба они представляют собой цифровую клавиатуру, когда ввод получает фокус.

<input type="search" /> показывает обычную клавиатуру с дополнительной кнопкой поиска

Все остальное вроде бы вызывает стандартную клавиатуру.

ВАЖНАЯ ЗАМЕТКА

Я публикую это как ответ, а не комментарий, так как это довольно важная информация, и она привлечет больше внимания в этом формате.

Как указывали другие товарищи, вы можете заставить устройство показывать цифровую клавиатуру с помощью type="number"/ type="tel", но я должен подчеркнуть, что с этим нужно быть предельно осторожным.

Если кто-то ожидает, что число начинается с нулей, например 000222, тогда у него могут возникнуть проблемы, так как некоторые браузеры (например, настольный Chrome) отправят на сервер 222, а это не то, что он хочет.

По поводу type="tel"ничего подобного сказать не могу, но лично не использую, так как его поведение на разных телефонах может отличаться. Я ограничился простым, pattern="[0-9]*"что не работает в Android

Это должно сработать. Но у меня такие же проблемы с телефоном Android.

<input type="number" /> <input type="tel" />

Я обнаружил, что если бы я не включил jquerymobile-framework, клавиатура показывала правильные два типа полей.

Но я не нашел решения этой проблемы, если вам действительно нужно использовать jquerymobile.

ОБНОВЛЕНИЕ: я обнаружил, что если тег формы хранится вне

<div data-role="page"> 

Цифровая клавиатура не отображается. Это должно быть ошибка ...

inputmodeсогласно спецификации WHATWG - это метод по умолчанию.

Для устройств iOS patternтакже может помочь добавление .

Также для обратной совместимости, typeпоскольку Chrome использует их начиная с версии 66.

<input
  inputmode="numeric"
  pattern="[0-9]*"
  type="number"
/>

Некоторые браузеры отправляют серверу начальный ноль, когда тип ввода - "число". Поэтому я использую смесь jquery и html для загрузки цифровой клавиатуры, а также проверяю, что значение отправляется как текст, а не как число:

$(document).ready(function(){
$(".numberonly").focus(function(){$(this).attr("type","number")});
$(".numberonly").blur(function(){$(this).attr("type","text")});
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="numberonly">

input type = number

Если вы хотите ввести числовой ввод, вы можете использовать значение атрибута HTML5 input type = "number".

<input type="number" name="n" />

Вот клавиатура, которая есть на iPhone 4:

iPhone Скриншот номера типа ввода HTML5 Android 2.2 использует эту клавиатуру для type = number:

Скриншот Android с номером типа ввода HTML5

Добавьте атрибут шага к числовому вводу

<input type="number" step="0.01">

Источник: http://blog.pamelafox.org/2012/05/triggering-numeric-keyboards-with-html5.html