css - モバイル Web サイトの数値入力を強制する

Question

「-wap-input-format」CSS プロパティを使用して、「*N」を使用して数値入力を強制しています。307これは私の SonyEricsson C702 では動作しますが、Windows Mobile IE、Windows Mobile with Opera、または SonyEricsson P1i では失敗します。

Answer 1

Opera や iPhone では JavaScript は必要ありません。おそらく Android でも必要ありません。HTML5 の「数値」入力タイプを使用するだけです。サポートしていないブラウザでは、テキスト入力にフォールバックします。

Answer 2

あなたが話しているフォーマットはWCSS（WAP CSS）プロパティであり、そのため、特に最近のモバイルデバイスではあまり広くサポートされていません。

-wap -input-formatは、どのような場合でもうまく機能しません。たとえば、ユーザーに小数（ "2.50"）で数値入力を入力させることは、ほぼ不可能です（最も近い解決策：-wap-input-format： "* n"）。

ただし、プロパティを検証に使用することはできませんが（Darasdが言ったように、これはサーバー側である必要があります）、モバイルデバイスの入力を数値に自動的に切り替えることでユーザーを支援できます。

入力フィールドの名前に「zip」または「phone」を追加することで、iPhoneでも同じことが可能であると言われています（例：「myfield_zip」）。ええ、私は知っています、これは不格好です。

それは素晴らしいアフォーダンスを引き起こすので、私はまだ両方のトリックを使用します（そして、必要に応じて、それらに加えてJavascriptを使用することができます）。

Answer 3

私の提案は、Javascriptを追加することでもあります。Mobile Operaだけでなく、iPhone、Minimo（mini-mozilla）なども、少なくともある程度はJavascriptを理解できます。

function noNumbers(e) {
    var keynum;
    var keychar;
    var numcheck;    
    if(window.event) // IE
    {
        keynum = e.keyCode;
    }
    else if(e.which) // Netscape/Firefox/Opera
    {
        keynum = e.which;
    }

    if((keynum >= 48) && (keynum <= 57)) {
        return(true);
    }

    var good_codes = [8, 14, 15, 37, 38, 39, 40];
    for(i = 0; i < good_codes.length; i++) {
        if(good_codes[i] == keynum) {
            return(true);
        }
    }

    return(false);
}

お役に立てれば！：）

metafilter.com

Answer 4

<input type='tel' /> 

Android と iPhone の既定のブラウザー、および Android 用の Chrome では数字キーパッドが表示されます。Windows Phone 7.5 では動作しませんが、WP8 のブラウザーは IE9 に基づいているため、Windows Phone 8 では動作するはずです。

使用する

<input type='number' /> 

もこれを行いますが、先頭のゼロは自動的に削除されます。