1

Estoy probando esta función para formatear el número que se ingresa con separador de miles, pero funciona en un campo y en el otro no.

¿Qué debería ajustarle para que sirva en los 2 o más campos?

const number = document.querySelector('.number');

number.addEventListener('keyup', (e) => {
	const element = e.target;
	const value = element.value;
  element.value = formatNumber(value);
});

function formatNumber (n) {
	n = String(n).replace(/\D/g, "");
  return n === '' ? n : Number(n).toLocaleString();
}
<input maxlength="13" placeholder="" value="" type="text" name="buySpread" class="inputStyle number" id="buySpread">

<input maxlength="13" placeholder="" value="" type="text" name="saleSpread" class="inputStyle number" id="saleSpread">

2 respuestas 2

1

Al ser múltiples input con la misma clase, necesitas tomar todos los elementos que posean la clase number (querySelectorAll). querySelectorAll devuelve una lista de los elementos dentro del documento, luego queda recorrerlo y aplicar el addEventListener para que funcione :)

var number = document.querySelectorAll('.number');

number.forEach(function(elem) {
  elem.addEventListener('keyup', (e) => {
      var element = e.target;
      var value = element.value;
      element.value = formatNumber(value);
    });
});

function formatNumber (n) {
	n = String(n).replace(/\D/g, "");
  return n === '' ? n : Number(n).toLocaleString();
}
<input maxlength="13" placeholder="" value="" type="text" name="buySpread" class="inputStyle number" id="buySpread">

<input maxlength="13" placeholder="" value="" type="text" name="saleSpread" class="inputStyle number" id="saleSpread">

te dejo un link con el ejemplo funcionando y en donde puedes editar el ejemplo a gusto https://jsfiddle.net/tgdz9wa1/

0

El problema es que querySelector

Devuelve el primer elemento del documento (utilizando un recorrido primero en profundidad pre ordenado de los nodos del documento) que coincida con el grupo especificado de selectores.

Es decir que solo le estas asignado el evento a uno solo.

Solución:

Una solución sería usar event delegation

// Si se preciona una tecla en el documento
document.addEventListener('keyup', (e) => {
  const element = e.target;

  // Si el elemento tiene la clase `number`
  if (element.classList.contains('number')) {
    element.value = formatNumber(element.value);
  }
});

function formatNumber(n) {
  n = String(n).replace(/\D/g, "");
  return n === '' ? n : Number(n).toLocaleString();
}
Con clase number: <input type="text" class="number"><br>
Con clase number: <input type="text" class="number"><br>
Sin clase number: <input type="text" name="otro">

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.