移动设备中带有正则表达式模式的html5输入类型编号

Question

我试图在输入类型中获得正则表达式模式number以仅显示数字和点.我试过这样的事.

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

<input type="tel">

两者都只显示数字(0-9),但不显示.(点).我需要在输入字段中使用点.

是否有可能通过html5？或者我要用javascript去？

注意:这在Android中运行良好,但是.(点)不在iphone中显示

我需要显示这样的移动键盘..

对此有何帮助？

Answer 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

希望这会帮助你.:)

自定义更新(参考: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();
});

结果:

Answer 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 (是的)
• 手机(是的)
• 歌剧(是的)
• 手机(是的)
• 歌剧(是的)
• 经典(是)
• Opera Mini (不)
• Firefox (是的)
• 手机(是的)
• 适用于Android的Chrome (是)

(来源:caniuse.com,DeviceAtlas,mobilehtml5.org)

浏览器支持模式属性

但Internet Explorer 10,Firefox,Opera和Chrome支持pattern属性.并且在Internet Explorer 9及更早版本或Safari中不受支持.

Answer 3

对于 iOS，请使用输入属性type="number", inputmode="decimal"。\n这将在 iOS 12.3+ 上显示带有 \xe2\x80\x9cdots\xe2\x80\x9d 的数字键盘。

\n