Forza input numerico per sito web mobile

Question

Sto usando la proprietà CSS '-wap-input-format' alla forza per l'input numerico con "* N". 307This lavora sul mio SonyEricsson C702, ma non riesce su Windows Mobile IE, Windows Mobile con Opera o SonyEricsson P1i.

Answer 1

Il mio suggerimento è anche quello di aggiungere un po 'Javascript. Opera Mobile così come l'iPhone, Minimo (mini-mozilla) e più in grado di capire JavaScript, almeno in una certa misura.

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

Spero che questo aiuti! )

metafilter.com

Answer 2

Non è necessario javascript Opera o iPhone e probabilmente non Android neanche. Basta usare il tipo di ingresso "numero", da HTML5. Sarà ricadere a un ingresso testo su browser che non lo supportano.

Answer 3

Il formato si sta parlando è un WCSS (CSS WAP) immobili, e come tale, non è molto ampiamente sostenuto -. specialmente nei moderni dispositivi mobili

Il -wap-input-format doesn' t lavoro molto bene in ogni caso. Ad esempio, gli utenti aventi compilare un input numerico con decimali ( "2,50") è quasi impossibile ( soluzione più vicina: -wap-input-formato: " * n" )

Tuttavia, mentre la proprietà non può essere invocata per convalida (questo deve ancora essere lato server, in ogni caso, come detto Darasd), può aiutare gli utenti commutando automaticamente l'ingresso del dispositivo mobile a numerico.

Lo stesso dice che sia possibile per iPhones aggiungendo "zip" o "telefono" per il nome del campo di input (ad es. "myfield_zip"). Sì, lo so, questo è goffo.

Mi piacerebbe ancora utilizzare entrambi i trucchi, come si innesca un bel affordance (e si può utilizzare Javascript oltre a loro, se si vuole).

Answer 4

<input type='tel' /> 

, si apre un tastierino numerico su Android e browser di default di iPhone e Chrome per Android. Non funziona su Windows Phone 7.5, ma dovrebbe su Windows Phone 8 dal browser di WP8 si basa su IE9.

con

<input type='number' /> 

farà anche questo, ma rimuoverà automaticamente zeri iniziali.