-1

Necesito que cuando el cliente va presionando el teclado para digitar su número de RUT o DNI, el sistema vaya agregando automáticamente los puntos y el guión, Pero cabe recordar que no todos los ruts tienen 8 dígitos sino que algunos tienen 9 y es eso que se debe tomar en cuenta.

Tengo el siguiente JavaScript simple pero solo funciona con ruts de 9 dígitos y no los de 8 dígitos:

<input type="text" class="inputs" name="rut" id="rut" 
    onkeydown = "this.value = this.value.replace
    ( /^(\d{1})(\d{3})(\d{3})(\w{1})$/, '$2.$2.$3-$4')" >

¿Alguna idea de cómo se puede hacer?

3
  • Entiendo tu pregunta, y tengo una solución pero me gustaria saber si estas de acuerdo en utilizar una libreria de terceros para esto? Recomiendo hacerlo asi porque la solución es mas simple y mas mantenible. el 20 abr. 2018 a las 15:55
  • uso jquery de momento
    – NICALANICA
    el 20 abr. 2018 a las 15:55
  • @NICALANICA Por favor completa el recorrido de bienvenida para aprender cómo funciona el sitio en general y también lee esta página del centro de ayuda con el comportamiento esperado por parte de los usuarios. Un saludo.
    – Alvaro Montoro
    el 20 abr. 2018 a las 18:24

3 respuestas 3

4

Una forma para que "vaya agregando automaticamente los puntos y el guion", podría ser la siguiente.

document.getElementById('rut').addEventListener('input', function(evt) {
  let value = this.value.replace(/\./g, '').replace('-', '');
  
  if (value.match(/^(\d{2})(\d{3}){2}(\w{1})$/)) {
    value = value.replace(/^(\d{2})(\d{3})(\d{3})(\w{1})$/, '$1.$2.$3-$4');
  }
  else if (value.match(/^(\d)(\d{3}){2}(\w{0,1})$/)) {
    value = value.replace(/^(\d)(\d{3})(\d{3})(\w{0,1})$/, '$1.$2.$3-$4');
  }
  else if (value.match(/^(\d)(\d{3})(\d{0,2})$/)) {
    value = value.replace(/^(\d)(\d{3})(\d{0,2})$/, '$1.$2.$3');
  }
  else if (value.match(/^(\d)(\d{0,2})$/)) {
    value = value.replace(/^(\d)(\d{0,2})$/, '$1.$2');
  }
  this.value = value;
});
<input type="text" class="inputs" name="rut" id="rut" maxlength="12">

-1

Ojo con esta, no me deja borrar de forma normal.

document.getElementById('rut').addEventListener('input', function(evt) {
  let value = this.value.replace(/\./g, '').replace('-', '');
  
  if (value.match(/^(\d{2})(\d{3}){2}(\w{1})$/)) {
    value = value.replace(/^(\d{2})(\d{3})(\d{3})(\w{1})$/, '$1.$2.$3-$4');
  }
  else if (value.match(/^(\d)(\d{3}){2}(\w{0,1})$/)) {
    value = value.replace(/^(\d)(\d{3})(\d{3})(\w{0,1})$/, '$1.$2.$3-$4');
  }
  else if (value.match(/^(\d)(\d{3})(\d{0,2})$/)) {
    value = value.replace(/^(\d)(\d{3})(\d{0,2})$/, '$1.$2.$3');
  }
  else if (value.match(/^(\d)(\d{0,2})$/)) {
    value = value.replace(/^(\d)(\d{0,2})$/, '$1.$2');
  }
  this.value = value;
});
<input type="text" class="inputs" name="rut" id="rut" maxlength="12">

1
-4

Dejaré la respuesta correcta aquí mismo para los que necesiten algo bueno para ruts chilenos:

<input type="text" class="inputs" 
name="cliente" id="cliente" 
maxlength="12" onkeyup="formatCliente(this)">
//importante que el id sea el correcto
//importante que por ser ruts chilenos no tengan mas de 12 caracteres de largo

<script type="text/javascript">
function formatCliente(cliente)
{cliente.value=cliente.value.replace(/[.-]/g, '')
.replace( /^(\d{1,2})(\d{3})(\d{3})(\w{1})$/, '$1.$2.$3-$4')}
</script>

y listo ya lo tenemos funcionando de forma sencilla, al tipear se ira formando solo el rut con sus puntos y guion correspondiente sin importar la cantidad de dígitos del rut.

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.