html5 - type - Entrada de formatos automáticos de Chrome=número

no autocomplete input

Question

Tengo una aplicación web en la que estoy especificando un campo de entrada para que sea un número usando el tipo de propiedad HTML5 = "número".

<input type="number" value="123456" />

Al especificar el tipo, Chrome formatea automáticamente el valor para incluir una coma (123,456). En otros navegadores, no formatea el número, pero tampoco previene caracteres no numéricos.

En este caso, no quiero que se agregue la coma. ¿Hay alguna forma de desactivar el formateo localizado?

Answer 1

¿Por qué querrías deshabilitar el formateo localizado? Si desea un formato diferente, simplemente cambie la configuración de localización de su PC. ¿Por qué un usuario no estaría interesado en mostrar un número en su formato local? Esto definitivamente no es un error en Chrome, ¡ sino una característica!

Me parece que en realidad no estás usando un "número" como entrada, sino un código de "texto" con un patrón. Vea las otras publicaciones para sugerencias de eso.

Answer 2

Aquí hay una lista completa de expresiones regulares que puede conectar al atributo "patrón" de la etiqueta de entrada html: Patrón HTML5

Así es como estoy usando un patrón para formatear los puntos decimales número dos:

<input type="number" pattern="/d+(/./d{2})?" />

Desafortunadamente, no parece funcionar del todo bien en el iPad.

Answer 3

Consulte mi respuesta para esta pregunta similar .

Creo que usar <input type="tel" /> es lo más lógico para evitar este escollo actualmente. Las otras opciones son intrigantes y algo nuevas para mí (como el atributo de pattern ) pero me parecieron insatisfactorias para mi diseño. Puede ver una captura de pantalla de una aplicación móvil que completé para Hilton no hace mucho tiempo here (en realidad se muestra en la respuesta a la que me referí por primera vez).

Answer 4

El número es uno de los nuevos tipos de entrada HTML5. Hay muchos de estos: correo electrónico, fecha, hora, url, etc. Sin embargo, creo que solo Chrome los ha implementado hasta ahora. Los otros recurren a usar el tipo predeterminado (texto).

Para obtener más información sobre los tipos de entrada HTML5: http://diveintohtml5.ep.io/forms.html

Si desea desactivarlo en Chrome, puede dejarlo como texto y cambiarlo a número si el dispositivo del usuario es una computadora de mano. Dado que no es un asesino de usabilidad si el olfateo del dispositivo del usuario arroja un resultado incorrecto, no debería tener ningún problema.

Answer 5

Esto ocurre debido al comportamiento asociado con el tipo de entrada de number HTML5 en Chromium, y definitivamente no es el único que no se preocupa por esto.

He trabajado alrededor de este problema en el pasado al usar el tipo de text . Por ejemplo, esto ha funcionado bien (probado ahora en Chrome 11.0.696.71):

<input type="text" 
       placeholder="Enter Text" 
       name="inputName" 
       pattern="[0-9]*">

Este comportamiento del tipo de number (para mí, al menos) es definitivamente un error, porque el estándar HTML5 especifica que el number debe tener el siguiente valor cuando se formatea para su visualización:

El algoritmo para convertir un número en una cadena, dado un número de entrada, es el siguiente: Devuelve un número de punto flotante válido que representa la entrada.

Y el estándar define un número de "punto flotante válido" here , y por lo que puedo ver, no se espera que incluya los caracteres de agrupación.

Actualizar

He aislado el problema con el siguiente código en las entrañas de WebKit. He incluido la línea que soluciona el problema aquí también:

// From LocalizedNumberICU.cpp
String formatLocalizedNumber(double number, unsigned fractionDigits)
{
    NumberFormat* formatter = numberFormatter();
    if (!formatter)
        return String();
    UnicodeString result;
    formatter->setMaximumFractionDigits(clampToInteger(fractionDigits));
    formatter->setGroupingUsed(FALSE); // added this line to fix the problem
    formatter->format(number, result);
    return String(result.getBuffer(), result.length());
}

Estoy de vacaciones la próxima semana, pero planeo enviar este parche al equipo de WebKit cuando regrese. Una vez que (afortunadamente) acepten el parche, Chromium debería incorporarlo como parte de su proceso de actualización normal.

Puede ver el código original here , la revisión parcheada here , y la diferencia del archivo original y el archivo parcheado here . El parche final fue creado por Shinya Kawanaka.

Answer 6

Hay un par de propiedades adicionales que puede verificar, incluido valueAsNumber .

Chrome intenta proporcionarle el mejor método de entrada posible en función del tipo de entrada. En este caso, el número también tiene algunas habilidades adicionales, como alternar entre subir y bajar.

El objetivo de esto es que si el número no es válido, podrá detectar que hay errores y también establecer la input[type=number]:invalid { background-color: red; } estilo input[type=number]:invalid { background-color: red; } input[type=number]:invalid { background-color: red; }

Answer 7

Prueba esto:

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $(''[type=number]'').attr(''type'', ''text'').attr(''pattern'', ''[0-9]*'');
}

Answer 8

Tu podrías intentar ...

<input type="text" pattern="[0-9]*" value="123456" />

que impondrá la entrada de 0-9 en Firefox 4 en el escritorio y en un iPhone; No tengo Chrome disponible para probarlo, pero debería hacer lo mismo.