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

Question

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

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

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

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

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

Answer 1

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

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

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

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

Answer 2

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

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

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

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

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

Answer 3

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

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

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

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

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

<div data-role="page"> 

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

Answer 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">

Answer 5

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

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

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

Answer 6

input type = number

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

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

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

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

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