2

Necesito formatear el valor de un input. Cuando se ingrese un valor numerico se debe eliminar los puntos ('.') y los guiones ('-') pero si se detecta que el valor ingresado es un string debe mantenerlo igual

function checkRut() {

  var rut = document.getElementById("search");
  var firstValue = rut.value.slice(0,1);

  // Despejar Puntos y Guión
  var valor = clean(rut, isNaN(firstValue));

  // Aislar Cuerpo y Dígito Verificador
  cuerpo = valor.slice(0,-1);
  dv = valor.slice(-1);

  // Formatear RUN
  rut.value = cuerpo + '-'+ dv
}

function clean (rut, firstValue) {
  if(firstValue === false){
     var valor = rut.value.replace(/[\.\-\_]/g, "");
  }
  return valor;
}
<input class="form-control" id="search" placeholder="Buscar por Nombre o RUN" autocomplete="off" oninput="checkRut()" name="searchText" type="search" value="">

lo que hago en la funcion es obtener el valor del input, del mismo extraigo el primer carácter para determinar si se trata de un numero o un cadena(esto porque si se ingresa un run(rol identificador único de una persona en Chile), el primer carácter será un número). En base a esas dos variables hago la condición de la funcion clean() que deberia validar si el primer valor es numerico pero no entiendo porqué no funciona.

Luego separo el ultimo carácter del valor del input para hacer el formato del run (1111111-1)

ahora, si no uso la función clean() y uso el siguiente cod:

function checkRut() {

var rut = document.getElementById("search");

// Despejar Puntos y Guión
var valor = rut.value.replace(/[\.\-\_]/g, "");

// Aislar Cuerpo y Dígito Verificador
cuerpo = valor.slice(0,-1);
dv = valor.slice(-1);

// Formatear RUN
rut.value = cuerpo + '-'+ dv

}

esta funciona a la perfección, pero no condiciono que sea solo para valores numericos, por lo que si se ingresa un texto separará el valor igual, agregando el guión que no deberia ser asi

introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí

¿Cuál seria la manera correcta de condionar la función y como podria agregar los puntos en los miles (ej: 12.345.678-5)?

4
  • Mira esta respuesta quizás responda tu pregunta: es.stackoverflow.com/a/276812/169744 Y ya que agregaste jQuery a las etiquetas de la pregunta, para aprovecharlo mira esta otra stackoverflow.com/a/22019116
    – Mateo
    Commented el 2 dic. 2021 a las 14:56
  • Tienes la etiqueta jQuery pero en el código no se está usando para nada Commented el 2 dic. 2021 a las 15:22
  • @Mateo muchas gracias por su comentario amigo, me es de utilidad :) Commented el 2 dic. 2021 a las 15:23
  • @PabloLozano si lo habia agregado por si alguien tenia una solución con jquery Commented el 2 dic. 2021 a las 15:24

2 respuestas 2

1

Por partes:

  • tu función falla porque cuando no es un número, la llamada a clean devuelve undefined y no se puede llamar a slice sobre undefined.

  • Formatear números es sencillo: usa Number.toLocaleString('es') para que use el formato estándar español.

Podrías hacer algo como

const inputRut = document.getElementById("search");

//evitemos añadir JS en el HTML, no es una buena práctica
inputRut.addEventListener("input", checkRut);


function checkRut() {

  const inputRut = document.getElementById("search");
  // Despejar Puntos y Guión
  const valor = clean(inputRut.value);

  if (!valor) return; //no es un número
  // Aislar Cuerpo y Dígito Verificador
  //guardamos en cuerpo como number, el + es similar a parseInt
  const cuerpo = + valor.slice(0,-1);
  const dv = valor.slice(-1);

  // Formatear RUN
  inputRut.value = cuerpo.toLocaleString('es') + '-' + dv
}

function clean (value) {
  // Sólo se aplica el formato a más de dos dígitos
  // para evitar que "2" se transforme en "-2"
  if(!isNaN(value[0]) && value.length > 1) { 
     return value.replace(/[.\-_]/g, "");
  }
}
<input class="form-control" id="search" placeholder="Buscar por Nombre o RUN" autocomplete="off" name="searchText" type="search" value="">

1
  • Muchas gracias por su respuesta estimado, sin embargo al borrar lo ingresado, el input deja 0-0 hay alguna manera de corregir eso? gracias nuevamente Commented el 2 dic. 2021 a las 16:59
1

Bien tomando en consideración la respuesta de @PabloLozano pude generar la funcion que se muestra a continuación.

La función determina si el primer carácter ingresado es un número, de ser asi quita cualquier carácter que no sea un número (letras, símbolos, etc) y formatea el valor a un run válido (12.345.678-5). También se eliminó la función clean() y se agrego el método toLocaleString()

Agradezco nuevamente a @PabloLozano por la orientación y aclaración en su respuesta.

function checkRut(rut) {
        var firstValue = rut.value.slice(0,1);

        // Formatear RUN
        if (isNaN(firstValue) === false) {
            // Despejar Puntos y Guión
            var valor = rut.value.replace(/^0+|[^0-9kK]+/g, "");
            rut.value = valor;

            // Aislar Cuerpo del numero y Dígito Verificador
            number = valor.slice(0,-1);
            dv = valor.slice(-1);

            // Si el valor del numero está vacío, deja el valor tal cual (vacío, asi se evita que quede un '-' cuando el input está vacio), sino, lo formatea
            if(number === '') {
                rut.value = valor
            }else{
                rut.value = parseInt(number).toLocaleString('es') + '-' + dv;
            }
        }
    }
<input class="form-control" id="search" placeholder="Buscar por Nombre o RUN" autocomplete="off" name="searchText" type="search" value="" oninput="checkRut(this)">

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.