@ideas-digitales/rut-input

Formato progresivo de RUT chileno para inputs de texto mientras el usuario escribe.

Este paquete sí hace: limpieza de caracteres + formateo visual (. y -).

Este paquete NO hace: validación semántica de RUT (sin módulo 11).

Instalación

npm install @ideas-digitales/rut-input

Uso rápido (manual)

import { formatRutInput } from '@ideas-digitales/rut-input';

formatRutInput('12345678k'); // "12.345.678-K"

API

• cleanRut(value: string): string

  • Deja solo dígitos y K.
  • Convierte k a K.
  • K solo puede quedar al final.
  • Largo máximo lógico: 9 (8 cuerpo + 1 verificador).

• formatRut(value: string): string

  • Limpia con cleanRut y aplica formato progresivo de RUT.

• formatRutInput(value: string): string

  • Alias semántico de formatRut.

• attachRutFormatter(input: HTMLInputElement, options?)

  • Aplica formato en cada input event.
  • Devuelve función de cleanup para desadjuntar listener.

Ejemplos de formateo

• 1 -> 1
• 12 -> 12
• 123 -> 123
• 1234 -> 1.234
• 12345 -> 12.345
• 123456 -> 123.456
• 1234567 -> 1.234.567
• 77204288 -> 7.720.428-8
• 12345678 -> 1.234.567-8
• 123456789 -> 12.345.678-9
• 12345678k -> 12.345.678-K

CDN (ES module)

<script type="module">
  import { formatRutInput } from 'https://cdn.jsdelivr.net/npm/@ideas-digitales/[email protected]/dist/index.js';

  console.log(formatRutInput('12345678k')); // 12.345.678-K
</script>

También podés usar unpkg:

<script type="module">
  import { formatRutInput } from 'https://unpkg.com/@ideas-digitales/[email protected]/dist/index.js';
</script>

CDN (global script)

<script src="https://cdn.jsdelivr.net/npm/@ideas-digitales/[email protected]/dist/rut-input.global.js"></script>
<script>
  console.log(window.RutInput.formatRutInput('12345678k')); // 12.345.678-K
</script>

Vanilla JS con attachRutFormatter

<input id="rut" type="text" />
<script type="module">
  import { attachRutFormatter } from 'https://cdn.jsdelivr.net/npm/@ideas-digitales/[email protected]/dist/index.js';

  const input = document.getElementById('rut');
  const detach = attachRutFormatter(input);

  // Cuando no lo necesites:
  // detach();
</script>

React

import { formatRutInput } from '@ideas-digitales/rut-input';
import { useState } from 'react';

export function RutField() {
  const [rut, setRut] = useState('');

  return (
    <input
      value={rut}
      onChange={(e) => setRut(formatRutInput(e.target.value))}
      placeholder="12.345.678-K"
    />
  );
}

WordPress (theme/plugin simple)

<?php
// Enqueue desde CDN
wp_enqueue_script(
  'rut-input',
  'https://unpkg.com/@ideas-digitales/[email protected]/dist/rut-input.global.js',
  array(),
  null,
  true
);

<input id="rut" type="text" />
<script>
  document.addEventListener('DOMContentLoaded', function () {
    var input = document.getElementById('rut');
    if (input && window.RutInput) {
      window.RutInput.attachRutFormatter(input);
    }
  });
</script>

License

MIT