entrada numérica força para o site móvel

Question

Eu tenho usado o '-input -wap-format' propriedade CSS para força a entrada numérica usando "* N". 307This funciona no meu SonyEricsson C702, mas falha em Windows Mobile IE, Windows Mobile com Opera ou SonyEricsson P1i.

Answer 1

A minha sugestão é também para adicionar um pouco de Javascript. Móvel Opera, bem como o iPhone, Minimo (mini-mozilla) e mais pode entender Javascript, pelo menos até certo ponto.

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

Espero que isso ajude! :)

metafilter.com

Answer 2

Você não precisa de javascript no Opera ou iPhone e provavelmente não android quer. Basta usar o "número" tipo de entrada, a partir de HTML5. Ele vai cair de volta para uma entrada de texto em navegadores que não suportam.

Answer 3

O formato que você está falando é um WCSS (WAP CSS) Propriedade, e, como tal, não é muito amplamente apoiada -. especialmente em dispositivos móveis modernos

O -wap-input-formato doesn' t funcionam muito bem em qualquer caso. Por exemplo, com os usuários possam preencher uma entrada numérica com decimais ( "2,50") é quase impossível ( solução mais próximo: -wap-input-formato: " * n" )

No entanto, enquanto a propriedade não pode ser invocado para validação (isso ainda precisa ser do lado do servidor, em qualquer caso, como disse Darasd), pode ajudar os usuários mudando automaticamente a entrada do dispositivo móvel para numérico.

O mesmo é disse ser possível para iPhones, acrescentando "zip" ou "telefone" para o nome do campo de entrada (por exemplo, "myfield_zip"). Sim, eu sei, este é desajeitado.

Eu ainda usar os dois truques, como ele desencadeia uma affordance agradável (e você pode usar Javascript, além deles, se você quiser).

Answer 4

<input type='tel' /> 

irá abrir um teclado numérico no Android e navegadores padrão do iPhone e do Chrome para Android. Ele não funciona no Windows Phone 7.5, mas deve no Windows Phone 8 desde o browser do WP8 é baseado no IE9.

Usando

<input type='number' /> 

vai fazer isso também, mas irá remover automaticamente zeros à esquerda.