Erzwingen numerische Eingabe für mobile Website

Question

mit "* N"

Ich habe mit der '-wap-input-Format' CSS-Eigenschaft auf, um die numerischen Eingabe zu erzwingen. 307This funktioniert auf meinem Sony Ericsson C702, aber nicht auf Windows Mobile IE, Windows Mobile mit Opera oder Sony Ericsson P1i.

Answer 1

Mein Vorschlag ist, auch einige Javascript hinzuzufügen. Mobile Opera sowie das iPhone, Minimo (Mini-mozilla) und vieles mehr kann Javascript verstehen, zumindest bis zu einem gewissen Grad.

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

Hope, das hilft! :)

metafilter.com

Answer 2

Sie müssen Javascript nicht auf Opera oder iphone und wahrscheinlich auch nicht Android. Verwenden Sie einfach die „Nummer“ Eingabetyp, von HTML5. Es wird auf Browsern auf eine Texteingabe zurückgreifen, die sie nicht unterstützen.

Answer 3

Das Format Sie redest ist ein WCSS (WAP CSS) Eigenschaft, und als solche ist nicht sehr breit unterstützt -. vor allem in modernen mobilen Geräten

Die -wap-input-Format doesn‘ t Arbeit sehr gut in jedem Fall. Zum Beispiel, füllen mit Benutzern in einer numerischen Eingabe mit Kommastellen ( "2.50") ist nahezu unmöglich ( nächste Lösung: -wap-input-Format: " * n" )

Während jedoch die Eigenschaft nicht für die Validierung herangezogen werden kann (dies muss noch Server-Seite sein, in jedem Fall, wie Darasd sagte), kann es den Benutzern helfen, indem sie automatisch das mobile Gerät des Eingabe in numerischen Schalt.

Das gleiche sagte möglich für iPhones sein von „zip“ Hinzufügen oder „Telefon“, um den Namen des Eingabefeldes (zB. „myfield_zip“). Ja, ich weiß, das ist klobig.

ich noch beide Tricks verwenden würde, wie es eine schöne affordance auslöst (und Sie können Javascript zusätzlich zu ihnen verwenden, wenn Sie möchten).

Answer 4

<input type='tel' /> 

wird eine numerische Tastatur auf Android und iPhone Standard-Browser und Chrome für Android bringen. Es funktioniert nicht auf Windows Phone 7.5, aber unter Windows Phone sollte 8 da WP8 Browser basiert auf IE9.

Mit

<input type='number' /> 

wird dies auch tun, aber führende Nullen automatisch entfernen.