web-dev-qa-db-ja.com

モバイルの正規表現パターンを持つhtml5入力タイプ番号

入力タイプnumberで正規表現パターンを取得して、数字とドットのみを表示しようとしています。私はこのようなことを試みました。

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

<input type="tel">

両方とも数字（0-9）のみを表示していますが、は表示していません。 （ドット）。入力フィールドにドットを使用する必要があります。

Html5で可能ですか？または、javascriptを使用しますか？

注：これはAndroidでは正常に機能していますが、 （ドット）iPhoneに表示されない

このようにモバイルキーパッドを表示する必要があります。

enter image description here

これに関するヘルプはありますか？

htmlioscsshtml5numpad
31
UI_Dev

「type = number」のみを指定すると、iPhoneで次のようなキーパッドが表示されます。

enter image description here

<input type="number" pattern="\d*"/>や<input type="number" pattern="[0-9]*" />などのパターンを指定すると、iPhoneのキーパッドは次のようになります。

enter image description here

それでもドット（。）を表示することはできません、現在、そのような場合を処理するパターンはありません。

したがって、次のようなキーパッドを提供する<input type="tel" />を選択できます。

enter image description here

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を入力するために入力した小数パターンを持つ通貨入力の例を見てみましょうfrom（前）小数点以下の配列。

完全なフィドルリンク

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

結果：

enter image description here

21
Mazzu

すべてのブラウザですべての入力タイプと属性がサポートされているわけではありません。一般に、IE10 +の最新のブラウザのほとんどには、電子メールや番号などの基本が含まれています。

特定のタイプの場合、ブラウザーは標準text入力に戻り、これらの値がサポートされていない場合は属性を無視します。

enter image description hereenter image description here

したがって、適切な正規表現パターンを使用してください。

例えば

<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（はい）
  • モバイル（はい）
  • Opera（はい）
  • クラシック（はい）
  • Opera Mini（no）
  • Firefox（はい）
  • モバイル（はい）
  • Chrome for Android（yes）

（出典：caniuse.com、DeviceAtlas、mobilehtml5.org）

パターン属性のブラウザーサポート

ただし、パターン属性はInternet Explorer 10、Firefox、Opera、およびChromeでサポートされています。 Internet Explorer 9以前のバージョン、またはSafariではサポートされていません。

13
amirhossein693

残念ながら、探している機能を正確に実現することは不可能です。ただし、同様の機能を提供する一種の「ハック」があります。

http://www.brownphp.com/2011/05/iphone-currency-input-web-apps/

ユーザーが入力を開始すると、0.01-> 0.12-> 1.23-> 12.34のように、小数を自動的に埋めるJSが少しあります。したがって、これは同様の効果に使用できます。

2
Rick

同様のシナリオがあり、小数点記号と数字のグループ化としてコンマとポイントの両方をサポートする必要がありました [こちらを参照]

例えば。

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

ただし、番号の検証では、パターンが許可する入力に失敗しました。これは、フィールドとフォームが無効としてマークされたことを意味します。

解決策は、タイプを「tel」に変更することでした。

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

モバイルユーザーにはデフォルトで数字キーパッドが表示され、パターン検証を使用して入力を検証します。

2
Kildareflare