9

次の入力フィールドがあります 

<input type="number" id="zip-code" placeholder="Zip code" />

Android 4.0 以降を除く通常のブラウザーではプレースホルダーが表示され、幅も他のフィールドに比べて縮小されます。
エラーは何ですか？

4

4 に答える 4

21

これは、デフォルトの Android Webkit ブラウザーの既知のバグです。このQuirksMode ページによると、多くのバージョンの Android がこれに悩まされていることがわかります。一方、Chrome for Android はそうではありません。

このための簡単な JavaScript シム (修正) を作成しました。まず、この質問How to display placeholder's text in HTML5's number-typed input を読んでから、そのようなプレースホルダーを引き続き使用したい場合は、my solution gistをチェックしてください。

TL;DR;

期待どおりにマークアップを残します。

<input type="number" placeholder="Enter some numbers" />

次に、ページが読み込まれた後にこれらのスクリプトのいずれかを実行します。

// jQuery version
$("input[type='number']").each(function(i, el) {
    el.type = "text";
    el.onfocus = function(){this.type="number";};
    el.onblur = function(){this.type="text";};
});

// Stand-alone version
(function(){ var elms = document.querySelectorAll("input"), i=elms.length;
    while(i--) {
        var el=elms[i]; if(el.type=="number"])
            el.type="text",
            el.onfocus = function(){this.type="number";},
            el.onblur = function(){this.type="text";};
    }
})();
于 2012-09-26T04:23:51.410 に答える
11

type = "number" の代わりに type = "tel' を使用すると、プレースホルダーが表示され、フォーカス時に数字キーボードが開きます。

于 2013-10-02T08:59:43.017 に答える
0

私は同じ問題を抱えていましたが、私の解決策は「タイプ」フィールドをテキストとして設定することでした。type プロパティが原因で発生すると思います。プレースホルダー テキストは数字ではありません。ユーザーに数値形式のみを使用するように強制する必要がある場合は、これにjavascriptプラグインを使用できます。私はそれを好きでした:)

于 2014-07-16T08:33:33.347 に答える