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

Question

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

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

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

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

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

Answer 1

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

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

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

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

Answer 2

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

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

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

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

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

<div data-role="page"> 

цифровой клавиатуры на не показана. Это должно быть ошибка ...

Answer 3

ВАЖНО

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

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

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

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

Answer 4

input type = number

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

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

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

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

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

Answer 5

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

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

http://blog.pamelafox.org/2012/05/triggering-numeric-keyboards-with-html5.html

Answer 6

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