Forzar la entrada numérica de sitio web para móviles

Question

He estado usando la propiedad CSS 'de entrada de -WAP formato' para forzar a la entrada numérica utilizando "* N". 307This funciona en mi SonyEricsson C702, pero falla en Windows Mobile Internet Explorer, Windows Mobile con Opera o SonyEricsson P1i.

Answer 1

Mi sugerencia es también para añadir un poco de Javascript. Opera Mobile, así como el iPhone, Minimo (mini-Mozilla) y más puede entender Javascript, al menos en cierta medida.

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 esto ayude! :)

metafilter.com

Answer 2

No es necesario javascript en Opera o iPhone y probablemente no sea Android. Sólo tiene que utilizar el "número" tipo de entrada, de HTML5. Se va a caer de nuevo a una entrada de texto en los navegadores que no soportan.

Answer 3

El formato que está hablando es un WCSS (CSS WAP) Propiedad, y, como tal, no es muy amplio apoyo -. especialmente en los modernos dispositivos móviles

El -WAP-formato-entrada doesn' t funcionan muy bien en todo caso. Por ejemplo, que tienen los usuarios llenan en una entrada numérica con decimales ( "2,50") es casi imposible ( solución más cercano: -WAP-formato-entrada: " * n" )

Sin embargo, mientras que la propiedad no puede ser invocado por la validación (esto todavía tiene que ser del lado del servidor, en cualquier caso, como dijo Darasd), puede ayudar a los usuarios mediante el cambio automático de entrada del dispositivo móvil para numérico.

Lo mismo es dice que es posible para iPhones mediante la adición de "zip" o "teléfono" al nombre del campo de entrada (por ejemplo "myfield_zip"). Sí, lo sé, esto es torpe.

Me todavía uso de ambos trucos, ya que desencadena un buen affordance (y se puede utilizar Javascript, además de ellos, si lo desea).

Answer 4

<input type='tel' /> 

aparecerá un teclado numérico en Android y los navegadores por defecto del iPhone y Chrome para Android. No funciona en Windows Phone 7.5, pero debe en Windows Phone 8 desde el navegador del WP8 se basa en IE9.

Uso

<input type='number' /> 

va a hacer esto también, pero eliminará automáticamente los ceros iniciales.