Номер типа ввода html5 с шаблоном регулярного выражения в мобильном

Я пытаюсь получить шаблон регулярного выражения в типе ввода number, чтобы отображать только числа и точки. Я пробовал что-то вроде этого.

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

<input type="tel">

Оба отображают только числа (0-9), но не отображаются. (Точка). Мне нужно использовать точку в поле ввода.

Возможно ли это через html5? Или мне пойти с javascript?

Примечание. Это отлично работает на Android, но. (точка) не отображается в iphones

Мне нужно отобразить мобильную клавиатуру следующим образом.

Любая помощь по этому поводу?

Ответ 1

Если вы укажете только "type = number", на iPhone будет отображаться клавиатура, например:

И если вы укажете шаблон, например, <input type="number" pattern="\d*"/> или <input type="number" pattern="[0-9]*" />, то клавиатура на iPhone будет выглядеть так:

Тем не менее, он не может отображать точку (.), В настоящее время нет шаблона для обработки такого случая.

Таким образом, вы можете выбрать <input type="tel" />, который обеспечит клавиатуру, например:

Пожалуйста, обратитесь к ссылкам ниже для более подробной информации о входах для iOS:

http://bradfrost.com/blog/mobile/better-numerical-inputs-for-mobile-forms/

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

https://about.zoosk.com/nb/engineering-blog/mobile-web-design-use-html5-to-trigger-the-appropriate-keyboard-for-form-inputs/

http://mobiforge.com/design-development/html5-mobile-web-forms-and-input-types

http://www.petefreitag.com/item/768.cfm

http://html5tutorial.info/html5-contact.php

Надеюсь, что это поможет вам. :)

Обновления для настройки (ссылка: fooobar.com/questions/22725/...)

Вы можете сделать некоторые настройки, используя JavaScript. Давайте возьмем пример ввода валюты с шаблоном десятичных дробей, в который введен e.which для чтения CharCode, а затем помещаем его в массив (до), который представляет цифры до десятичной запятой, и другой массив (после) для перемещения значений из (до) массива после десятичной запятой.

полная скриптовая ссылка

HTML:

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

Переменные и функции:

// declare variables
var i = 0,
    before = [],
    after = [],
    value = [],
    number = '';

// reset all values
function resetVal() {
    i = 0;
    before = [];
    after = [];
    value = [];
    number = '';
    $("#number").val("");
    $(".amount").html("");
}

// add thousand separater
function addComma(num) {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

Основной код:

// listen to keyup event
$("#number").on("keyup", function (e, v) {

    // accept numbers only (0-9)
    if ((e.which >= 48) && (e.which <= 57)) {

        // convert CharCode into a number   
        number = String.fromCharCode(e.which);

        // hide value in input
        $(this).val("");

        // main array which holds all numbers
        value.push(number);

        // array of numbers before decimal mark
        before.push(value[i]);

        // move numbers past decimal mark
        if (i > 1) {
            after.push(value[i - 2]);
            before.splice(0, 1);
        }

        // final value
        var val_final = after.join("") + "." + before.join("");

        // show value separated by comma(s)
        $(this).val(addComma(val_final));

        // update counter
        i++;

        // for demo
        $(".amount").html(" " + $(this).val());

    } else {

        // reset values
        resetVal();
    }
});

Сброс:

// clear arrays once clear btn is pressed
$(".ui-input-text .ui-input-clear").on("click", function () {
    resetVal();
});

Результат:

Ответ 2

Не все типы ввода и атрибут поддерживаются во всех браузерах. В общем, большинство современных браузеров из IE10 + включают в себя основы, такие как электронная почта и номер.

Браузер вернется к стандартному текстовому вводу при наличии определенного типа и игнорирует атрибуты, если эти значения не поддерживаются.

Итак, вы должны использовать хороший шаблон регулярного выражения.

например

<input type="tel" name="tel" pattern="^(?:\(\d{3}\)|\d{3})[- . ]?\d{3}[- . ]?\d{4}$" />

1234567899
123 456 7899
123-456-7899
123.456.7899

поддерживается

Поддержка браузера для типа "tel"

Android (да)
iOS (да)
IE (yes)
Мобильный (да)
Opera (yes)
Мобильный (да)
Opera (yes)
Классический (да)
Opera Mini (нет)
Firefox (да)
Мобильный (да)
Chrome для Android (да)

(Источники: caniuse.com, DeviceAtlas, mobilehtml5.org)

Поддержка браузера для атрибута шаблона

Но атрибут pattern поддерживается в Internet Explorer 10, Firefox, Opera и Chrome. И не поддерживается в Internet Explorer 9 и более ранних версиях или в Safari.

Ответ 3

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

~~http://www.brownphp.com/2011/05/iphone-currency-input-web-apps/~~ (Ссылка не работает)

Это бит JS, который автоматически заполняет десятичную дробь, когда пользователь начинает печатать, например: 0,01 → 0,12 → 1,23 → 12,34. Так что это может быть использовано для аналогичного эффекта.

Ответ 4

У меня был аналогичный сценарий, в котором мне нужно было поддерживать как запятую, так и точку как десятичную метку, так и цифровую группировку [см. здесь]

например.

1,00/1,00
1,000,000.00/1.000.000,00

В то же время сценарий требовал, чтобы цифровая клавиатура отображалась на мобильных устройствах.

В исходной реализации объединен тип 'number' с атрибутом pattern.

<input type="number" pattern="^(0*[,.]*[0-9][0-9]*([,.][0-9]+)*|[0-9]?[,.][0-9]*[1-9][0-9]*)$" required />

Тем не менее, число отказов с подтверждением количества ошибок, которое допускает шаблон. Это означало, что поле и, таким образом, форма были отмечены как недействительные.

Решение заключалось в том, чтобы изменить тип на "tel".

<input type="tel" pattern="^(0*[,.]*[0-9][0-9]*([,.][0-9]+)*|[0-9]?[,.][0-9]*[1-9][0-9]*)$" required />

Мобильные пользователи теперь будут видеть цифровую клавиатуру по умолчанию, и проверка валидации будет использоваться для проверки ввода.