ios - 在移动设备中使用正则表达式模式的 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*"/>or的模式<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' 类型的浏览器支持

• 安卓（是）
• iOS （是）
• IE （是）
• 移动（是）
• 歌剧（是）
• 移动（是）
• 歌剧（是）
• 经典（是）
• Opera Mini （无）
• 火狐（是）
• 移动（是）
• 适用于 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"。这将在 iOS 12.3+ 上显示带有“点”的数字键盘。

Answer 4

不幸的是，不可能实现您正在寻找的确切功能。然而，有一种“hack”可以提供类似的功能：

http://www.brownphp.com/2011/05/iphone-currency-input-web-apps/（链接断开）

当用户开始输入时，它会自动填充小数点，就像这样： 0.01 -> 0.12 -> 1.23 -> 12.34 。所以这可以用于类似的效果。

Answer 5

我有一个类似的场景，我需要同时支持逗号和点作为小数点和数字分组[见这里]

例如

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

同时，该场景要求数字键盘显示在移动设备上。

初始实现将“数字”类型与模式属性相结合。

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

移动用户现在会默认看到一个数字键盘，并且模式验证将用于验证输入。