モバイルウェブサイトの数値入力を強制する

Question

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

Answer 1

私の提案はまた、いくつかのJavascriptを追加することです。 モバイルオペラだけでなく、iPhone、Minimo（ミニモジラ）などは、少なくともある程度は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 2

あなたが話しているフォーマットはWCSS（WAP CSS）特性であり、そのように、非常に広くサポートされていません - 特に現代のモバイルデバイスに。

-wap-input-formatはどんな場合でもうまく機能しません。たとえば、ユーザが小数点（ "2.50"）で数字入力を入力することは、不可能（closest solution: -wap-input-format: "*n"）の次になります。

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

入力フィールドの名前（例： "myfield_zip"）に "zip"または "phone"を追加すると、同じものがsaid to be possibleになります。ええ、私は知っている、これはclunkyです。

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

Answer 3

Operaやiphoneではjavascriptが必要ではなく、おそらくアンドロイドではありません。 HTML5の "number"入力タイプを使用してください。それは、それをサポートしていないブラウザのテキスト入力に戻ってしまいます。

Answer 4

<input type='tel' /> 

は、AndroidとiPhoneのデフォルトブラウザとAndroid用Chromeにテンキーパッドを表示します。 WP8のブラウザはIE9に基づいているため、Windows Phone 7.5では動作しませんが、Windows Phone 8で動作するはずです。

<input type='number' /> 

を使用して

はあまりにもこれを実行しますが、自動的に先頭のゼロを削除します。