html5 - tipo - input type number thousand separator

Forzar punto decimal en lugar de coma en la entrada de número HTML5(del lado del cliente)

Question

He visto que algunos navegadores localizan la notación input type="number" de números.

Entonces, en los campos donde mi aplicación muestra las coordenadas de longitud y latitud, obtengo cosas como "51,983" donde debería ser "51.982559". Mi solución alternativa es usar input type="text" lugar, pero me gustaría utilizar la entrada numérica con la visualización correcta de los decimales.

¿Hay alguna manera de obligar a los navegadores a usar un punto decimal en la entrada numérica, independientemente de las configuraciones locales del lado del cliente?

(No hace falta decir que en mi aplicación, de todos modos, corrijo esto en el lado del servidor, pero en mi configuración también necesito que sea correcto en el lado del cliente (debido a algo de JavaScript)).

Gracias por adelantado.

ACTUALIZACIÓN En este momento, al registrar la versión de Chrome 28.0.1500.71 m en Windows 7, la entrada de número simplemente no acepta decimales formateados con una coma. Las sugerencias propuestas con el atributo de step no parecen funcionar.

http://jsfiddle.net/AsJsj/

Answer 1

¿Has considerado usar Javascript para esto?

$(''input'').val($(''input'').val().replace('','', ''.''));

Answer 2

1) 51,983 es ​​un número de tipo de cadena que no acepta la coma

entonces deberías configurarlo como texto

<input type="text" name="commanumber" id="commanumber" value="1,99" step=''0.01'' min=''0'' />

reemplazar con .

y cambiar el atributo de tipo a número

$(document).ready(function() {
    var s = $(''#commanumber'').val().replace(//,/g, ''.'');   
    $(''#commanumber'').attr(''type'',''number'');   
    $(''#commanumber'').val(s);   
});

Consulte http://jsfiddle.net/ydf3kxgu/

Espero que esto resuelva tu problema

Answer 3

Actualmente, Firefox respeta el lenguaje del elemento HTML en el que reside la entrada. Por ejemplo, prueba este violín en Firefox:

http://jsfiddle.net/ashraf_sabry_m/yzzhop75/1/

Verá que los números están en árabe, y la coma se usa como el separador decimal, que es el caso con el árabe. Esto se debe a que la etiqueta BODY recibe el atributo lang="ar-EG" .

A continuación, prueba este:

http://jsfiddle.net/ashraf_sabry_m/yzzhop75/2/

Este se muestra con un punto como el separador decimal porque la entrada está envuelta en un DIV dado el atributo lang="en-US" .

Por lo tanto, una solución a la que puede recurrir es envolver sus entradas numéricas con un elemento de contenedor que está configurado para usar una cultura que usa puntos como el separador decimal.

Answer 4

Con el atributo de paso especificado para la precisión de los decimales que desee, su entrada numérica html5 aceptará decimales. p.ej. tomar valores como 10.56; quiero decir 2 números de lugar decimales, haz esto:

<input type="number" step="0.01" min="0" lang="en" value="1.99">

Puede especificar aún más el atributo max para el valor máximo permitido.

Editar Agregar un atributo lang al elemento de entrada con un valor de configuración regional que formatea los decimales con un punto en lugar de una coma

Answer 5

De acuerdo con la spec , puede usar any como el valor del atributo de step :

<input type="number" step="any">

Answer 6

Encontré un artículo de blog que parece explicar algo relacionado: http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/

En resumen:

• el step ayuda a definir el dominio de valores válidos
• el step predeterminado es 1
• por lo tanto, el dominio predeterminado es enteros (entre min y max , inclusive, si se proporciona)

Supongo que se está confundiendo con la ambigüedad de usar una coma como un separador de miles frente a una coma como un punto decimal, y tu 51,983 es en realidad un cincuenta y un mil novecientos ochocientos tres analizados de manera extraña.

Aparentemente puede usar step="any" para ampliar el dominio a todos los números racionales en el rango, sin embargo, yo no lo he probado. Para latitud y longitud que utilicé con éxito:

<input name="lat" type="number" min="-90.000000" max="90.000000" step="0.000001">
<input name="lon" type="number" min="-180.000000" max="180.000000" step="0.000001">

Puede que no sea lindo, pero funciona.

Editar: el enlace actualizado es https://www.isotoma.com/blog/2012/03/02/html5-input-typenumber-and-decimalsfloats-in-chrome/

Answer 7

Lamentablemente, la cobertura de este campo de entrada en los navegadores modernos es muy baja:

http://caniuse.com/#feat=input-number

Por lo tanto, recomiendo esperar el respaldo y confiar en una entrada cargada programáticamente pesada [tipo = texto] para hacer el trabajo, hasta que el campo sea generalmente aceptado.

Hasta ahora, solo Chrome, Safari y Opera tienen una implementación ordenada, pero todos los demás navegadores tienen errores. ¡Algunos de ellos ni siquiera parecen admitir decimales (como BB10)!

Answer 8

No sé si esto ayuda pero tropecé aquí cuando busqué este mismo problema, solo desde un punto de vista de entrada (es decir, noté que mi <input type="number" /> aceptaba tanto una coma como un punto cuando tipeando el valor, pero solo el último estaba sujeto al modelo angularjs que asigné a la entrada). Así que lo solucioné al anotar esta directiva rápida:

.directive("replaceComma", function() {
    return {
        restrict: "A",
        link: function(scope, element) {
            element.on("keydown", function(e) {
                if(e.keyCode === 188) {
                    this.value += ".";
                    e.preventDefault();
                }
            });
        }
    };
});

Luego, en mi html, simplemente: <input type="number" ng-model="foo" replace-comma /> sustituirá comas con puntos sobre la marcha para evitar que los usuarios ingresen inválidos (desde el punto de vista de javascript, no un local uno!) números. Aclamaciones.

Answer 9

Por lo que yo entiendo, el input type="number HTML5 input type="number siempre devuelve input.value como una string .

Aparentemente, input.valueAsNumber devuelve el valor actual como un número de coma flotante. Puede usar esto para devolver el valor que desee.

Ver http://diveintohtml5.info/forms.html#type-number

Answer 10

Use lang atribut en la entrada. Configuración regional en mi aplicación web fr_FR, lang = "en_EN" en el número de entrada y puedo usar indiferentemente una coma o un punto. Firefox siempre muestra un punto, Chrome muestra una coma. Pero ambos separtores son válidos.

Answer 11

una opción es javascript parseFloat() ... nunca analizar una " text chain" --> 12.3456 con un punto a un int ... 123456 (int eliminar el punto) analizar una cadena de texto a un FLOAT ...

para enviar este coords a un servidor haz esto enviando una cadena de texto. HTTP solo envía TEXT

en el cliente, manténgase fuera del análisis de los coords de entrada con " int ", trabaje con cadenas de texto

si imprime los cordones en el html con php o similar ... flote al texto e imprima en html

Answer 12

usa el patrón

<input 
       type="number" 
       name="price"
       pattern="[0-9]+([/.,][0-9]+)?" 
       step="0.01"
       title="This should be a number with up to 2 decimal places."
>

buena suerte