在移動設備中使用正則表達式模式的 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 上的鍵盤就會像：

仍然無法顯示 dot(.)，目前沒有處理這種情況的模式。

因此，您可以選擇<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-property-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 支持模式屬性。 並且在Internet Explorer 9 和更早版本或Safari 中不受支持。

Answer 3

對於 iOS，使用輸入屬性type="number" , inputmode="decimal" 。 這將在 iOS 12.3+ 上顯示帶有“點”的數字鍵盤。

Answer 4

不幸的是，不可能實現您正在尋找的確切功能。 然而，有一種“黑客”可用，它會提供類似的功能：

http://www.brownphp.com/2011/05/iphone-currency-input-web-apps/ （鏈接已斷開）

這是一個 JS 代碼，它會在用戶開始輸入時自動填充小數，如下所示： 0.01 -> 0.12 -> 1.23 -> 12.34 。 所以這可以用於類似的效果。

Answer 5

我有一個類似的場景，我需要同時支持逗號和點作為小數點和數字分組[見這里]

例如

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

同時，該方案要求在移動設備上顯示數字鍵盤。

最初的實現結合了 'number' 類型和模式屬性。

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

然而，數字驗證失敗了模式允許的輸入。 這意味着該字段和表單被標記為無效。

解決方案是將類型更改為“電話”。

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

默認情況下，移動用戶現在會看到一個數字鍵盤，並且模式驗證將用於驗證輸入。