35

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

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

<input type="tel">

どちらも数字 (0-9) のみを表示していますが、表示していません。（ドット）。入力フィールドでドットを使用する必要があります。

html5で可能ですか？それともjavascriptで行きましょうか？

注: これは Android では問題なく動作しますが、. (ドット) iphone で表示されない

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

ここに画像の説明を入力

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

4

5 に答える 5

25

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

結果：

ここに画像の説明を入力

于 2014-11-27T09:14:36.617 に答える
3

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

例えば

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

同時に、このシナリオでは、数字キーパッドがモバイル デバイスに表示される必要がありました。

初期の実装では、'number' 型と pattern 属性が組み合わされていました。

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

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

于 2015-08-26T23:00:29.453 に答える
3

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

http://www.brownphp.com/2011/05/iphone-currency-input-web-apps/ (リンク切れ)

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

于 2014-11-30T21:07:16.473 に答える