Skip to main content
mejora en la respuesta
Origen Enlace
Oscar Cid
  • 125
  • 1
  • 10

Al ser múltiples input con la misma clase, necesitas tomar todos los inputelementos que posean la clase number (querySelectorAllquerySelectorAll), lo que genera un array. querySelectorAll devuelve una lista de los elementos dentro del documento, luego queda recorrerlo paray 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();
}

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/

Al ser múltiples input necesitas tomar todos los input (querySelectorAll), lo que genera un array, luego recorrerlo para 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();
}

te dejo un link con el ejemplo funcionando https://jsfiddle.net/tgdz9wa1/

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/

Origen Enlace
Oscar Cid
  • 125
  • 1
  • 10

Al ser múltiples input necesitas tomar todos los input (querySelectorAll), lo que genera un array, luego recorrerlo para 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();
}

te dejo un link con el ejemplo funcionando https://jsfiddle.net/tgdz9wa1/