带有regex模式的html5输入类型数字

如果仅指定“ type = number”，它将在iPhone上显示键盘，例如：

如果您将模式指定为<input type="number" pattern="\d*"/>或<input type="number" pattern="[0-9]*" />，则iPhone上的键盘将如下所示：

Still it cannot display dot(.), currently there is no pattern to handle such case.

So you may opt for <input type="tel" /> which will provide keypad like:

Please refer to below links for more details on inputs for 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

Hope this will help you. :)

Updates for customization (reference: https://stackoverflow.com/a/20021657/1771795)

您可以使用javascript进行一些自定义。让我们以带有十进制模式的货币输入为例，在该模式中e.which读取CharCode输入，然后将其推入一个数组（之前），该数组表示小数点之前的数字，另一个数组（之后）将值从（之前）数组移到小数点之后。

完整的小提琴链接

HTML：

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

JS

变量和函数：

// 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();
});

结果：