Телефон: цифрова клавіатура для введення тексту

Чи є спосіб змусити цифрову клавіатуру з'явитися на телефон <input type="text">? Я щойно зрозумів, що <input type="number">HTML5 призначений для "цифр з плаваючою комою", тому він не підходить для номерів кредитних карт, поштових індексів тощо.

Я хочу наслідувати функціоналу цифрової клавіатури <input type="number">, для входів, які приймають числові значення, відмінні від чисел з плаваючою комою. Чи є, можливо, інший відповідний inputтип, який це робить?

Можна зробити <input type="text" pattern="\d*">. Це призведе до появи цифрової клавіатури.

Дивіться тут для більш детальної інформації: Посібник з програмування тексту, Інтернету та редагування для iOS

<form>
  <input type="text" pattern="\d*">
  <button type="submit">Submit</button>
</form>

Станом на середину 2015 року, я вважаю, що це найкраще рішення:

<input type="number" pattern="[0-9]*" inputmode="numeric">

Це дасть вам цифрову клавіатуру для Android та iOS:

Це також дає очікувану поведінку на робочому столі за допомогою кнопок зі стрілками вгору / вниз та зручною клавішкою зі стрілкою вгору / вниз:

Спробуйте в цьому фрагменті коду:

<form>
  <input type="number" pattern="[0-9]*" inputmode="numeric">
  <button type="submit">Submit</button>
</form>

Комбінуючи і те, type="number"і pattern="[0-9]*ми отримуємо рішення, яке працює всюди. І, його пересилання сумісний з майбутнім запропонованим inputmodeатрибутом HTML 5.1 .

Примітка: Використання шаблону призведе до перевірки нативної форми браузера. Ви можете відключити це за допомогою novalidateатрибута, або ви можете налаштувати повідомлення про помилку для невдалої перевірки за допомогою titleатрибута.

Якщо вам потрібно ввести провідні нулі, коми або букви - наприклад, міжнародні поштові індекси - ознайомтеся з цим незначним варіантом .

Кредити та подальше читання:

http://www.smashingmagazine.com/2015/05/form-inputs-browser-support-issue/ http://danielfriesen.name/blog/2013/09/19/input-type-number-and-ios- цифрові клавіатури /

Я виявив, що принаймні для полів, подібних до "парольного коду", виконання чогось подібного до <input type="tel" />кінця створює найбільш автентичне поле, орієнтоване на число, і це також має перевагу від автоматичного форматування . Наприклад, у мобільному додатку, який я нещодавно розробив для Hilton, я закінчив це:

... і мій клієнт був дуже вражений.

<form>
  <input type="tel" />
  <button type="submit">Submit</button>
</form>

Якщо ви користуєтесь type="email"або type="url", ви отримаєте клавіатуру принаймні на деяких телефонах, таких як iPhone. Для телефонних номерів можна використовувати type="tel".

Існує небезпека використання <input type="text" pattern="\d*">клавіші цифрової клавіатури. Що стосується Firefox та chrome, регулярний вираз, що міститься в шаблоні, змушує браузер перевірити введення цього виразу. помилки будуть виникати, якщо вона не відповідає шаблону або залишена порожньою. Будьте в курсі ненавмисних дій в інших браузерах.

<input type="text" inputmode="numeric">

За допомогою Inputmode ви можете дати підказку веб-переглядачу.

Я думаю, що type="number"це найкраще для семантичної веб-сторінки. Якщо ви просто хочете змінити клавіатуру, ви можете використовувати type="number"або type="tel". В обох випадках iPhone не обмежує введення користувача. Користувач все ще може ввести (або вставити) будь-які символи, які він / вона хоче. Єдина зміна - це клавіатура, показана користувачеві. Якщо ви хочете будь-яке обмеження поза цим, вам потрібно використовувати JavaScript.

Для мене найкращим рішенням було:

Для цілих чисел, що відображає 0-9 на Android та iphone

<label for="ting">
<input id="ting" name="ting" type="number" pattern="[\d]*" />

Ви також можете зробити це, щоб сховати спінери в firefox / chrome / safari, більшість клієнтів вважають, що вони виглядають некрасиво

 input[type=number]::-webkit-inner-spin-button,
 input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
 }

 input[type=number] {
      -moz-appearance:textfield;
 }

І додайте novalidate = 'novalidate' до елемента форми, якщо ви робите спеціальну перевірку

Ps на всякий випадок, якщо ви насправді хотіли, щоб цифри з плаваючою точкою зрештою були, додайте до будь-якої точності, яка вам здається, додасть " на андроїд

<label for="ting">
<input id="ting" name="ting" type="number" pattern="[\d\.]*" step="0.01" />

У 2018 році:

<input type="number" pattern="\d*">

працює як для Android, так і для iOS.

Я протестував на Android (^ 4.2) та iOS (11.3)

Ви можете спробувати так:

<input type="number" name="input">
<input type="submit" value="Next" formnovalidate="formnovalidate">

Але будьте обережні: Якщо ваш вхід містить щось інше, ніж число, воно не буде передано серверу.

Я не міг знайти тип, який найкраще працював для мене у будь-яких ситуаціях: мені було потрібно за замовчуванням цифровий запис (наприклад, запис "7.5"), але також у певний час дозволяти текст ("пройти", наприклад). Користувачі хотіли цифрову клавіатуру (наприклад, запис 7.5), але потрібно було періодично вводити текст (наприклад, "пройти").

Швидше те, що я зробив, було додати прапорець до форми та дозволити користувачу перемикати мій вхід (id = "inputSresult") між type = "число" та type = "text".

<input type="number" id="result"... >
<label><input id="cbAllowTextResults" type="checkbox" ...>Allow entry of text results.</label>

Потім я підключив обробник кліків до прапорця, який перемикає тип між текстом і номером на основі того, чи встановлено прапорець вище:

$(document).ready(function () {
    var cb = document.getElementById('cbAllowTextResults');
    cb.onclick = function (event) {
        if ($("#cbAllowTextResults").is(":checked"))
            $("#result").attr("type", "text");
        else
            $("#result").attr("type", "number");

    }
});

Це добре спрацювало для нас.

 <input type="text" inputmode="decimal">

це дасть u введення тексту за допомогою цифрової клавіатури

Ви можете використовувати inputmodeатрибут html:

<input type="text" inputmode="numeric" />

Для отримання більш детальної інформації ознайомтеся з документом MDN на вхідному режимі .

спробуйте це:

$(document).ready(function() {
    $(document).find('input[type=number]').attr('type', 'tel');
});

звертайтесь: https://answers.laserfiche.com/questions/88002/Use-number-field-input-type-with-Field-Mask