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

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

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

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

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

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

Ответы

Ответ 1

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

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

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

Все остальное, похоже, вызывает стандартную клавиатуру.

Ответ 2

ВАЖНОЕ ПРИМЕЧАНИЕ

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

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

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

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

Ответ 3

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

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

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

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

UPDATE: Я узнал, что если тег формы хранится из

<div data-role="page">

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

Ответ 4

Некоторые браузеры, отправляющие ведущий нуль на сервер, когда тип ввода является "числом". Поэтому я использую смешение 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">

Ответ 6

input type = number

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

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

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

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

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