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

У мене є мобільний веб-сайт, і в ньому є деякі inputелементи HTML , наприклад:

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

Деякі браузери igoners надсилають на сервер нульовий нуль, коли тип введення - "число". Тому я використовую змішування 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 type = "number".

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

Ось клавіатура, яка з’являється на iPhone 4:

Знімок екрана iPhone з номером типу вводу HTML5 Android 2.2 використовує цю клавіатуру для type = number:

Знімок екрана Android номера типу вводу HTML5

Додайте атрибут step до введення числа

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

Джерело: http://blog.pamelafox.org/2012/05/triggering-numeric-keyboards-with-html5.html