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

94

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

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

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

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

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

android html webview keyboard html-input нчакмак
источник
Если вам нужна цифровая клавиатура на iOS в дополнение к Android, вы должны сделать это: stackoverflow.com/a/31619311/806956
Аарон Грей
2
inputmode="number"Атрибут кажется, правильный ответ в конце 2019 года: developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/... . Ответ, получивший наибольшее количество голосов на момент публикации этого комментария, предполагает type="number", что в нем есть свои подводные камни; inputmodeпохоже, влияет только на отображение виртуальной клавиатуры, а не на поведение / ограничения самого ввода.
SheffDoinWork

Ответы:

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

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

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

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

Ричард Кернахан
источник
Взглянем на это сегодня, а затем сообщим вам, сработает ли это. Спасибо, Ричард!
ncakmak 01
1
Привет, Ричард. Ничего не заработало, поле ввода все еще открывается стандартной клавиатурой.
ncakmak 03
1
Список input types в спецификации HTML , включая numberи tel.
Рори О'Кейн,
1
Обратите внимание, что клавиатура для type="tel"хуже набирает числа, чем клавиатура для type="number".
Рори О'Кейн,
2
<input type="text" pattern="\d*" /> также отображает цифровую клавиатуру, но только на iOS, а не на Android .
Рори О'Кейн,
52

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

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

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

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

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

user907860
источник
4
Автоматического переформатирования наверное не бывает с type="tel". В спецификации отмечается, что telне применяется какой-либо конкретный синтаксис, в отличие от numberкоторого требуется, чтобы его значение было допустимым числом с плавающей запятой .
Рори О'Кейн,
Насколько плохо? Мы пытаемся ускорить процесс заполнения формы для наших мобильных клиентов, и это кажется очевидным решением, но нам также нужно что-то надежное. Вы написали строгое предупреждение против использования этого метода. Интересно, не могли бы вы подробнее рассказать об этом?
Philll_t
@Philll_t, пользователю необходимо отправить данные «000222», но вы на стороне сервера вместо этого получаете «222». Разве вы не видите, что функциональность полностью нарушена? Сервер получает неверные данные.
user907860
Да, я понимаю, что вы имеете в виду, но я хочу сказать следующее: какой процент пользователей это видит? Это проблема основных мобильных браузеров, таких как Safari и Chrome? Откуда вы знаете, что это проблема, можете ли вы предоставить ссылку. Я верю вам, я просто хочу исследовать себя и не видел ничего, что предполагало бы это, может быть, вы укажете мне правильное направление. Мы просто пытаемся понять, не выиграет ли от этого наша клиентская база.
Philll_t
1
@Philll_t Я думаю, что лучший пример этого предупреждения - для полей ввода даты рождения. Где вам нужно ввести вручную день, месяц и год. И да, многие веб-сайты по-прежнему используют этот стиль вместо обычно используемых средств выбора даты. Что касается проблемы с полями ввода «Дата рождения», это когда вы вводите свой день или месяц, начиная с «0», например, 08.
Робин Карло Катакутан,
9

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

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

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

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

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

<div data-role="page">

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

Джеспер Гранн Лаурсен
источник
Спасибо, что вникли в это. Я не уверен, что понимаю: «если тег формы хранится вне div [data-role = page]». В моем случае проблема возникает с формами, которые красиво вложены в div [data-role = page]. Возможно, проблема в том, что в моем случае эти страницы отображаются как диалоги?
Wytze
9

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

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

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

<input
  inputmode="numeric"
  pattern="[0-9]*"
  type="number"
/>
Реза Горбани
источник
1
Спасибо за ответ, искал decimalи нашел здесь developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/…
Рами Аллуш
3

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

Али Шейхпур
источник
3
Это вызывает неприятную проблему в Chrome для Android. При нажатии на входе, клавиатура никак не придумать. Затем вы должны нажать на текстовое поле второй раз, и тогда на клавиатуре появится клавиатура только с цифрами. Я действительно хотел бы, чтобы у нас была type="digits"возможность, чтобы у нас не было этих хаков. Я имею в виду, это не похоже на то, что число с нулевым начальным числом является таким редким (почтовые индексы в США являются очевидным примером).
Jaxidian
2
Я тоже сталкиваюсь с той же проблемой! установка поля на "type = tel" - лучшее решение.
Али Шейхпур
-2

input type = number

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

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

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

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

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

Авинаш Пандит
источник