const digitos = document.getElementById("digitossube");

digitos.addEventListener("click", (e) =>{
    digitos.classList.add("active")
})

digitos.addEventListener("blur", function() {
    if (digitos.value === "") {
      digitos.classList.remove("active");
    }
  });

  digitos.addEventListener("input", function() {
    digitos.value = digitos.value.replace(/[^0-9]/g, "");
  });

  digitos.addEventListener("input", function(e) {
    const pastedText = e.clipboardData.getData("text/plain");
    const onlyNumbers = pastedText.replace(/[^0-9]/g, "");
    digitos.value = onlyNumbers;
    e.preventDefault();
  });

  function formatInput(input) {
    input.addEventListener("input", function(e) {
      // Eliminar cualquier espacio existente en el valor del input
      let value = e.target.value.replace(/\s/g, "");
      
      // Dividir el valor en grupos de 4 dígitos
      let groups = value.match(/.{1,4}/g);
      
      // Unir los grupos con espacios
      let formattedValue = groups ? groups.join(" ") : "";
      
      // Limitar el valor a un máximo de 18 dígitos
      formattedValue = formattedValue.slice(0, 22);
      
      // Actualizar el valor del input
      e.target.value = formattedValue;
    });
  }

  const input = document.getElementById("digitossube");
  formatInput(input);