Tengo una aplicación web de donde yo soy la especificación de un campo de entrada a un número mediante el HTML5 propiedad type=»number».

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

Especificando el tipo, Chrome automáticamente los formatos de el valor a incluir una coma (123,456). En otros navegadores que no formato de número, pero también no impide caracteres no numéricos.

En este caso, no quiero que la coma para ser añadido. Hay alguna forma de desactivar formato localizado?

  • Sé que puedo dejar el tipo de texto y el uso de JS para hacer valer los tipos de caracteres. Sin embargo, estoy usando esto en una aplicación móvil y desea que el teclado de forma predeterminada, el número de distribución de teclado.
  • ¿Qué versión de Chrome están viendo este coma? No la puedo ver en mi versión.
  • yo uso crome demasiado, pero coma no está incluido? no la puedo ver en mi versión también.
  • Estoy viendo la coma en 11.0.696.25 beta
  • Sólo asegúrese de no utilizar chrome como el navegador de tu móvil =P
  • Parece ser un error en Chrome – code.google.com/p/chromium/issues/detail?id=78520
  • Mi versión de Chrome (11.0.696.71) tiras de ceros a la izquierda, inserta comas y no permiten a las cartas en el campo. No quiero que ninguna de estas conductas. Sólo quiero dispositivos móviles para utilizar el teclado adecuado. Este overhelpfulness es sólo una molestia. Todas estas conductas debe ser algo que tengo que entregar en al menos me dan una manera de desactivarlos sin hacer la detección del navegador!
  • Safari es hacer la misma cosa en mobile safari. Molesto para los campos de código postal.

8 Comentarios

  1. 92

    Esto se produce porque el comportamiento asociado con el HTML5 number tipo de entrada en Cromo, y definitivamente no es el único que no se preocupa por esto.

    He trabajado en torno a este problema en el pasado por el uso de la text tipo. 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 de la number tipo (a mí, al menos) es sin duda un error, porque el Estándar HTML5 especifica el number debe tener el siguiente valor cuando el formato de pantalla:

    El algoritmo para convertir un número a una cadena, dado un número de entrada, es como sigue: Vuelta válido de un número de punto flotante que representa la entrada.

    Y el estándar define un «válido de punto flotante» número aquí, y por lo que puedo ver, incluyendo caracteres de agrupamiento no se espera.


    Actualización

    He aislado el problema al siguiente código de abajo en las entrañas de WebKit. He incluido la línea que corrige el problema que aquí:

    //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 el plan de la presentación de este parche para el WebKit equipo cuando regrese. Una vez que (esperemos) aceptar el parche, Cromo debe tirar de él como parte normal de su proceso de actualización.


    Se puede ver el código original aquí, la revisión de la revisión aquí, y el diff de la
    archivo original y el archivo parcheado aquí. El último parche fue creado por Shinya Kawanaka.

    • Funciona, pero no es la solución ideal en cuanto a perder las flechas arriba/abajo. Sigue siendo el mejor método que he encontrado hasta ahora, aunque.
    • De acuerdo. Tener que evitar number en Chrome es un dolor; con la esperanza de que el problema se soluciona rápidamente.
    • He producido un fix que corrige este problema en Cromo, pero el problema real es en el WebKit de código. Voy a presentar a la WebKit proyecto cuando regrese de vacaciones en 6/13.
    • Webkit error 62939 entró por Patrick! Gracias!
    • Esta solución es exactamente lo que yo necesitaba para hacer un número de entrada de trabajo de campo como yo quería que en el Ipad. Gracias!
    • +1 para que no sólo responder a la pregunta, pero, a continuación, tomar el tiempo para realmente solucionar el software que está causando el error!
    • Acabo de comprobar Chrome 20.0.1132.11 beta-m, y no es ya que presentan este comportamiento. Según los comentarios en el WebKit defecto, en Mar 11, 2012 se declaró que «este error fue corregido para plataformas usando LocalizedNumberICU, tales como el Cromo. Todavía tenemos el problema con el uso de plataformas de LocalizedNumberMac (OS X y iOS).» Así que, al menos algunos avances en la dirección correcta.
    • WebKit defecto 93236 se acaba de abrir para abordar esta en las plataformas de Apple.
    • Parece defecto 93236 estaba fija en el 7 de Agosto, y que se cerró el tema final con defecto 62939. Así que, eso debe ser para este problema.
    • Estoy de impresión «10,30» de la Cultura «nl-SER». A mi en-GB chrome se convierte este en un campo VACÍO (valor de 10,30 pero usted no lo puede ver), la acepta, pero puestos como 10.30, cosas DIVERTIDAS, no totalmente confuso
    • Un número de patrón también debe permitir la entrada de «e»,»E»,»+»,»-» como en 1e-8

  2. 5

    Hay un par de propiedades adicionales que usted puede comprobar incluyendo valueAsNumber.

    Chrome intenta proveer de usted el mejor método de entrada sea posible, basándose en el tipo de entrada. En este caso, el número también tiene algunas habilidades extra, tales como la alternancia de arriba y abajo.

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

    • buen truco. gracias.
    • Agradezco esta respuesta fue escrito 2.5 años atrás, pero quería compartir mi experiencia de la que he probado esto en Chrome 31.0.1650.63 y la valueAsNumber propiedad no es necesaria y puede ser omitido.
  3. 5

    Usted podría intentar …

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

    que hará valer la entrada de 0-9 en Firefox 4 en el escritorio, así como un iPhone, no tengo Chrome en la mano para probarlo, pero se debe hacer lo mismo.

    • Se hace lo mismo. Comas, comas, comas.
    • No agregar comas en IOS.
  4. 3

    Número es uno de los nuevos tipos de entrada de HTML5. Hay un montón de estos – email, fecha, hora, url, etc. Sin embargo, creo que sólo Chrome ha implementado hasta ahora. Los demás volver a usar el tipo por defecto (de texto).

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

    Si quieres desactivarlo en Chrome, usted puede dejar como texto y el cambio de número, si el usuario del dispositivo móvil. Ya que no es una usabilidad asesino si el dispositivo de usuario oler da mal resultado, usted no debería tener problemas.

    • Yo preferiría que el navegador de alguna manera me permite controlar la forma en que los formatos de la serie a través del HTML en lugar de requerir que el usuario desactive. Quiero un campo numérico pero sin formato, de modo que ambos dispositivos móviles y de escritorio puede tener la misma experiencia. Como es, el de los dispositivos móviles estoy probando con lo maneja bien por el impago para el diseño de teclado adecuado. Chrome (dev channel) en el escritorio de ajustes de la interfaz de usuario en la manera en que yo originalmente publicado acerca de.
    • ¿Qué acerca del uso de JavaScript y cancelación de eventos de pulsación de tecla para otra cosa que números? Alternativamente, les permiten ser presionado, pero muestra un error junto a la caja de entrada.
    • Ya tengo un script con cable, que solo permite los números, pero la principal razón por la que tiene el conjunto de entrada a type=»number» es así que el móvil (iPad/iPhone/etc) teclado predeterminados a uno con los números. De esta forma el usuario no pulse el número de botón diseño. Es sólo una cuestión de conveniencia.
  5. 2

    Se refieren a mi respuesta para esta pregunta similar.

    Creo que con <input type="tel" /> es más lógico para evitar este escollo en la actualidad. Las otras opciones son interesantes y un poco nuevo para mí (como el pattern atributo) pero me he encontrado con ellos a no ser satisfactorio para mi el diseño. Se puede ver en la captura de pantalla de una aplicación móvil que me completa para Hilton no hace mucho aquí (que en realidad se muestra en la respuesta que primero hace referencia).

  6. 1

    Intente esto:

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

    Aquí está una lista de expresiones regulares que se pueden conectar a la «modelo» con el atributo de html de la etiqueta de entrada: HTML5 Patrón

    Aquí es cómo estoy usando un patrón para dar formato al número dos decimales:

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

    Lamentablemente esto no parece funcionar muy bien en el iPad.

  8. 0

    ¿Por qué quieres desactivar el formato localizado? Si desea un formato diferente, simplemente cambiar la configuración de la localización de su PC. ¿Por qué un usuario no estar interesado en mostrar un número en su formato local? Este es, sin duda no un error en Chrome pero una característica!

    A mí me parece que no son realmente el uso de un «número» como entrada, sino más bien de un «texto» código con un patrón. Ver los otros posts sugerencias para que.

    • Hay muchas razones. Por ejemplo, un año de 4 dígitos de campo (por ejemplo, 2013) se convierte de 2.013 cuando el tipo de entrada es el número! Dónde está la lógica en eso?
    • Si seguía siendo local, hay menos personas que se quejan. Además de la obvia mis-formato de años, códigos postales, tarjetas de crédito, usted todavía está lidiando con estos comas que se envían al servidor! No es local
    • usted no debe usar type=number para el año, hemos <input type=year> para que

Dejar respuesta

Please enter your comment!
Please enter your name here