javascript - tipo - validar contraseñas iguales html5

Cómo manejar flotantes y separadores decimales con el número de tipo de entrada html5

Question

Estoy construyendo una aplicación web que es principalmente para navegadores móviles. Estoy usando campos de entrada con tipo de número, por lo que (la mayoría) los navegadores móviles invocan solo el teclado numérico para una mejor experiencia del usuario. Esta aplicación web se usa principalmente en regiones donde el separador decimal es una coma, no un punto, así que necesito manejar ambos separadores decimales.

¿Cómo cubrir todo este lío con punto y coma?

Mis hallazgos:

Escritorio Chrome

• Tipo de entrada = número
• El usuario ingresa "4,55" al campo de entrada
• $("#my_input").val(); devuelve "455"
• No puedo obtener el valor correcto de la entrada

Desktop Firefox

• Tipo de entrada = número
• El usuario ingresa "4,55" al campo de entrada
• $("#my_input").val(); devuelve "4,55"
• Está bien, puedo reemplazar la coma con el punto y obtener la flotación correcta

Navegador Android

• Tipo de entrada = número
• El usuario ingresa "4,55" al campo de entrada
• Cuando la entrada pierde el foco, el valor se trunca a "4"
• Confundir al usuario

Windows Phone 8

• Tipo de entrada = número
• El usuario ingresa "4,55" al campo de entrada
• $("#my_input").val(); devuelve "4,55"
• Está bien, puedo reemplazar la coma con el punto y obtener la flotación correcta

¿Cuáles son las "mejores prácticas" en este tipo de situaciones en que el usuario puede usar coma o punto como separador decimal y quiero mantener el tipo de entrada html como número para proporcionar una mejor experiencia de usuario?

¿Puedo convertir la coma en punto "sobre la marcha", vinculando eventos clave, ¿está trabajando con entradas numéricas?

EDITAR

Currenlty No tengo ninguna solución, cómo obtener el valor de flotación (como cadena o número) desde la entrada cuyo tipo está configurado en número. Si el usuario final ingresa "4,55", Chrome siempre devuelve "455", Firefox devuelve "4,55", lo cual está bien.

También es bastante molesto que en Android (emulador probado de 4.2), cuando ingreso "4,55" al campo de entrada y cambio el foco a otro lugar, el número ingresado se trunque a "4".

Answer 1

¿Mi recomendación? No use jQuery en absoluto. Yo tenía el mismo problema que tú. Descubrí que $(''#my_input'').val() siempre devuelve un resultado extraño.

Intenta usar document.getElementById(''my_input'').valueAsNumber lugar de $("#my_input").val(); y luego, use Number(your_value_retrieved) para tratar de crear un Número. Si el valor es NaN, seguramente sabes que no es un número.

Una cosa para agregar es cuando escribe un número en la entrada, la entrada realmente aceptará casi cualquier carácter (puedo escribir el símbolo del euro, un dólar y todos los demás caracteres especiales), así que es mejor recuperar el valor usando .valueAsNumber lugar de usar jQuery.

Ah, y por cierto, eso les permite a sus usuarios agregar internacionalización (es decir: comas de apoyo en lugar de puntos para crear números decimales). Simplemente deje que el objeto Number() cree algo para usted y será seguro para decimales, por así decirlo.

Answer 2

Creo que lo que falta en las respuestas anteriores es la necesidad de especificar un valor diferente para el atributo de step , que tiene un valor predeterminado de 1 . Si desea que el algoritmo de validación de entrada permita valores de coma flotante, especifique un paso en consecuencia.

Por ejemplo, quería cantidades en dólares, así que especifiqué un paso como este:

 <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.">

No tiene nada de malo utilizar jQuery para recuperar el valor, pero le resultará útil utilizar la API DOM directamente para obtener la propiedad validity.valid los elementos.

Tuve un problema similar con el punto decimal, pero la razón por la que me di cuenta de que había un problema era por el estilo que Twitter Bootstrap agrega a una entrada numérica con un valor no válido.

Aquí hay un violín que demuestra que la adición del atributo de step hace funcionar, y también prueba si el valor actual es válido:

• jsFiddle

TL; DR: establezca el atributo de step en un valor de coma flotante, ya que por defecto es 1 .

NOTA : La coma no valida para mí, pero sospecho que si configuro la configuración del idioma / región del sistema operativo en algún lugar que use una coma como separador decimal, funcionaría. * nota en la nota *: ese no era el caso para la configuración del idioma / teclado del sistema operativo * alemán * en Ubuntu / Gnome 14.04.

Answer 3

Cuando llamas $("#my_input").val(); vuelve como una variable de cadena. Entonces use parseFloat y parseInt para convertir. Cuando usa parseFloat su escritorio o teléfono, ITSELF entiende el significado de la variable.

Y además puedes convertir un float en una cadena usando toFixed que tiene un argumento del recuento de dígitos de la siguiente manera:

var i = 0.011;
var ss = i.toFixed(2); //It returns 0.01

Answer 4

De acuerdo con w3.org, el atributo de valor de la entrada numérica se define como un número de coma flotante . La sintaxis del número de punto flotante parece solo aceptar puntos como separadores decimales.

He enumerado algunas opciones a continuación que pueden ser útiles para usted:

1. Usando el atributo de patrón

Con el atributo de pattern , puede especificar el formato permitido con una expresión regular en una forma compatible con HTML5. Aquí puede especificar que el carácter de coma esté permitido y un mensaje de respuesta útil si el patrón falla.

<input type="number" pattern="[0-9]+([,/.][0-9]+)?" name="my-num"
           title="The number input must start with a number and use either comma or a dot as a decimal character."/>

Nota: El soporte entre navegadores varía mucho. Puede ser completo, parcial o inexistente.

2. Validación de JavaScript

Podría tratar de vincular una devolución de llamada simple a, por ejemplo, el evento onchange (y / o blur ) que reemplazaría la coma o validaría todos juntos.

3. Deshabilitar la validación del navegador ##

En tercer lugar, podría intentar usar el atributo formnovalidate en las entradas numéricas con la intención de deshabilitar la validación del navegador para ese campo en conjunto.

<input type="number" formnovalidate />

4. Combinación ...?

<input type="number" pattern="[0-9]+([,/.][0-9]+)?" 
           name="my-num" formnovalidate
           title="The number input must start with a number and use either comma or a dot as a decimal character."/>

Answer 5

No he encontrado una solución perfecta, pero lo mejor que pude hacer fue usar type = "tel" y desactivar la validación html5 (formnovalidate):

<input name="txtTest" type="tel" value="1,200.00" formnovalidate="formnovalidate" />

Si el usuario pone una coma, saldrá con la coma en todos los navegadores modernos que probé (los últimos FF, IE, edge, opera, chrome, safari desktop, android chrome).

El problema principal es:

• Los usuarios de dispositivos móviles verán el teclado de su teléfono, que puede ser diferente del teclado numérico.
• Peor aún, el teclado del teléfono ni siquiera tiene una tecla para una coma.

Para mi caso de uso, solo tuve que:

• Muestra el valor inicial con una coma (firefox lo elimina para tipo = número)
• No falla la validación html5 (si hay una coma)
• Haga que el campo lea exactamente como entrada (con una posible coma)

Si tiene un requisito similar, esto debería funcionar para usted.

Nota: No me gustó el soporte del atributo de patrón. El formnovalidate parece funcionar mucho mejor.

Answer 6

Parece que le gustaría usar toLocaleString () en sus entradas numéricas.

Consulte https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString para conocer su uso.

La localización de números en JS también se trata en Internacionalización (Formato numérico "num.toLocaleString ()") que no funciona para Chrome

Answer 7

Si se debe utilizar una coma o un período para el separador decimal depende completamente del navegador. El navegador toma una decisión basada en la configuración regional del sistema operativo o navegador, o algunos navegadores toman pistas del sitio web. Hice un cuadro de comparación de navegador que muestra cómo diferentes navegadores soportan diferentes métodos de localización. Safari es el único navegador que maneja las comas y los períodos de manera intercambiable.

Básicamente, usted como autor web no puede controlar esto. Algunas soluciones incluyen el uso de dos campos de entrada con enteros. Esto permite que cada usuario ingrese los datos como usted espera. No es particularmente sexy, pero funcionará en todos los casos para todos los usuarios.

Answer 8

Use valueAsNumber lugar de .val() .

entrada. valueAsNumber [= valor]

Devuelve un número que representa el valor del control de formulario, si corresponde; de lo contrario, devuelve nulo.
Se puede configurar, para cambiar el valor.
Lanza una excepción INVALID_STATE_ERR si el control no está basado en fecha ni hora ni es numérico.