Chrome/Chromium el valor numérico de entrada está vacío cuando el último carácter es un punto.

En Chrome (u otro navegador basado en Chromium), cuando intento obtener el valor de un campo de entrada de tipo número, el valor está vacío cuando el último carácter es un punto (.).

Aquí está el ejemplo más simple que se me ocurrió:

<input type="number" oninput="console.log(event.target.value)">

En Chrome, al escribir por ejemplo “123.45”, el resultado será:

1 12 123 123.4 123.45

En Firefox obtengo algo más similar a lo que espero:

1 12 123 123 123.4 123.45

Si obtengo el valor usando valueAsNumber en lugar de value, obtendré un NaN si el último carácter es un punto, por lo que tampoco hay éxito allí.
¿Existe alguna forma de obtener el valor real del campo (o al menos el valor sin el punto) y no algo que ya esté parseado de alguna manera?

ACTUALIZACIÓN:

Gracias a @Kaiido estoy un poco más cerca de entender por qué ocurre esto.
En mi navegador Chrome, navigator.languages está configurado como ['en-US', 'en', 'nl'], en Firefox está configurado solo como ['en-US', 'en'].

Esto explica la diferencia entre los dos navegadores (en mi caso) y por qué en Chrome puedo usar tanto la coma (',') como el punto ('.').

Pero todavía necesito una solución para el problema.
Lo más importante en mi caso es que necesito distinguir entre el campo vacío y algún otro valor que no se pueda parsear como un número. Así que ahora la pregunta es, ¿hay alguna forma de obtener el valor de lo que se está escribiendo en realidad en el campo?

davy.ai

August 6, 2023 at 4:29 am

El problema descrito se debe a la diferencia en la forma en que Chrome y Firefox manejan los separadores decimales según la configuración navigator.languages. En Chrome, cuando el último caracter en un campo de entrada numérico es un punto (.), la propiedad value devuelve una cadena vacía. Del mismo modo, en esos casos la propiedad valueAsNumber devuelve NaN.

Una forma de solucionar este problema es usar el atributo step en el campo de entrada para forzar un separador decimal específico. Por ejemplo, agregar step=".01" al campo de entrada asegurará que el separador decimal siempre sea un punto (.), independientemente de la configuración navigator.languages.

Otra solución es usar el evento input y obtener el valor de entrada sin procesar desde la propiedad event.target.value. Esto te dará el valor antes de que sea analizado por el navegador. Luego puedes usar parseFloat o Number para convertir el valor a un número.

Por último, para distinguir entre un campo de entrada vacío y un valor que no se puede analizar como número, puedes verificar si el valor de entrada sin procesar es una cadena vacía ('') o si devuelve NaN después de ser analizado.

Aquí tienes un ejemplo:

<input type="number" step=".01" oninput="handleInput(event)">

<script>
function handleInput(event) {
  const rawValue = event.target.value;
  if (rawValue === '') {
    // El campo de entrada está vacío
  } else {
    const parsedValue = parseFloat(rawValue);
    if (isNaN(parsedValue)) {
      // El valor no se puede analizar como número
    } else {
      // El valor es un número válido
    }
  }
}
</script>

Answer

davy.ai

August 6, 2023 at 4:29 am
El problema descrito se debe a la diferencia en la forma en que Chrome y Firefox manejan los separadores decimales según la configuración navigator.languages. En Chrome, cuando el último caracter en un campo de entrada numérico es un punto (.), la propiedad value devuelve una cadena vacía. Del mismo modo, en esos casos la propiedad valueAsNumber devuelve NaN.

Una forma de solucionar este problema es usar el atributo step en el campo de entrada para forzar un separador decimal específico. Por ejemplo, agregar step=".01" al campo de entrada asegurará que el separador decimal siempre sea un punto (.), independientemente de la configuración navigator.languages.

Otra solución es usar el evento input y obtener el valor de entrada sin procesar desde la propiedad event.target.value. Esto te dará el valor antes de que sea analizado por el navegador. Luego puedes usar parseFloat o Number para convertir el valor a un número.

Por último, para distinguir entre un campo de entrada vacío y un valor que no se puede analizar como número, puedes verificar si el valor de entrada sin procesar es una cadena vacía ('') o si devuelve NaN después de ser analizado.

Aquí tienes un ejemplo:
```
<input type="number" step=".01" oninput="handleInput(event)">

<script>
function handleInput(event) {
  const rawValue = event.target.value;
  if (rawValue === '') {
    // El campo de entrada está vacío
  } else {
    const parsedValue = parseFloat(rawValue);
    if (isNaN(parsedValue)) {
      // El valor no se puede analizar como número
    } else {
      // El valor es un número válido
    }
  }
}
</script>
```

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Chrome/Chromium el valor numérico de entrada está vacío cuando el último carácter es un punto.

Answer

davy.ai