Enmascaramiento de texto de entrada sin un complemento usando JavaScript

Puedes crear una máscara de entrada en JavaScript sin un complemento si das formato al valor de un campo en un controlador del evento input. Los ejemplos siguientes usan funciones pequeñas de JavaScript, así que no hace falta descargar archivos de bibliotecas. Dan formato a dígitos de tarjetas de crédito, un código postal alfanumérico ilustrativo y un número de teléfono de Norteamérica; después muestran cómo adaptar el formateador para otro campo.

Para probar un ejemplo, coloca su script en un elemento <script> después del campo correspondiente en el HTML, o cárgalo con defer. Asigna al campo el id que usa el script. Cada fragmento de código es un programa JavaScript completo para el campo indicado. Estos fragmentos no se han ejecutado en un navegador, por lo que no se afirma ningún resultado.

El formato cambia lo que se muestra mientras alguien escribe. No determina si un valor es válido, no identifica una tarjeta de pago ni sustituye las comprobaciones del servidor. Un pattern de HTML puede ayudar a comprobar un valor completo al enviar un formulario, pero no agrega espacios ni signos de puntuación mientras alguien escribe.

Enmascaramiento de números de tarjetas de crédito en JavaScript

Este ejemplo conserva los dígitos e inserta un espacio después de cada grupo de cuatro. Muestra hasta 19 dígitos, lo que abarca longitudes habituales de números de tarjeta sin presuponer que todas tengan la misma longitud. El código usa type="text" con una indicación de entrada numérica para que el navegador no aplique el comportamiento de un campo numérico a una cadena de dígitos.

function formatCardNumber(value) {
  const digits = value.replace(/\D/g, "").slice(0, 19);
  return digits.replace(/(.{4})/g, "$1 ").trim();
}

if (typeof document !== "undefined") {
  const cardField = document.querySelector("#card-number");
  if (cardField) {
    cardField.addEventListener("input", () => {
      cardField.value = formatCardNumber(cardField.value);
    });
  }
}

Combínalo con un campo como <input id="card-number" type="text" inputmode="numeric" autocomplete="cc-number" placeholder="1234 5678 9012 3456">. Escribe los dígitos sin espacios; el controlador los agrupa automáticamente. Este controlador sencillo resulta más cómodo al escribir al final del texto. Reformatear el valor con cada pulsación puede mover el cursor si se edita en medio, así que un formulario de pago para producción debería usar un formateador con control del cursor que esté bien probado. Trata el valor formateado como texto de presentación y valídalo por separado.

Enmascaramiento de códigos postales en JavaScript

Los formatos de los códigos postales varían según el país; algunos usan letras, espacios o guiones. Este ejemplo ilustra un patrón de seis caracteres que alterna letras y dígitos; no es una regla postal universal. Convierte las letras a mayúsculas, elimina los demás caracteres y muestra un espacio después del tercer carácter.

function formatPostalCode(value) {
  const characters = value.toUpperCase().replace(/[^A-Z0-9]/g, "").slice(0, 6);
  return characters.length > 3
    ? `${characters.slice(0, 3)} ${characters.slice(3)}`
    : characters;
}

if (typeof document !== "undefined") {
  const postalField = document.querySelector("#postal-code");
  if (postalField) {
    postalField.addEventListener("input", () => {
      postalField.value = formatPostalCode(postalField.value);
    });
  }
}

Úsalo con <input id="postal-code" type="text" autocomplete="postal-code" placeholder="A1B 2C3">. El formateador acepta letras y dígitos en cualquier posición; el texto de ejemplo indica una forma posible, mientras que la función solo da formato a los caracteres. Ajusta las reglas de caracteres, la agrupación y la longitud al país y a los datos de dirección que admita tu formulario. No uses este formato ilustrativo para rechazar códigos de otras regiones.

Enmascaramiento de números de teléfono con paréntesis en JavaScript

El siguiente formateador supone un número nacional de diez dígitos de Norteamérica y lo muestra como (212) 555-0123. Acepta dígitos, descarta los adicionales y agrega signos de puntuación a medida que se completan los grupos. No admite códigos de llamada internacionales, extensiones ni otros planes nacionales de numeración.

function formatNorthAmericanPhone(value) {
  const digits = value.replace(/\D/g, "").slice(0, 10);
  if (digits.length === 0) return "";
  if (digits.length < 4) return `(${digits}`;
  if (digits.length < 7) return `(${digits.slice(0, 3)}) ${digits.slice(3)}`;
  return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6)}`;
}

if (typeof document !== "undefined") {
  const phoneField = document.querySelector("#phone-number");
  if (phoneField) {
    phoneField.addEventListener("input", () => {
      phoneField.value = formatNorthAmericanPhone(phoneField.value);
    });
  }
}

Combina el script con <input id="phone-number" type="tel" autocomplete="tel-national" placeholder="(212) 555-0123">. El evento input también se activa cuando alguien pega texto, y el formateador conserva únicamente los dígitos. Para un formulario internacional, elige un formato según el país que seleccione la persona o usa una biblioteca de números de teléfono que gestione los planes de numeración y el movimiento del cursor; este ejemplo fijo no sirve como máscara telefónica general.

Personalizar el enmascaramiento de entrada para distintos campos en JavaScript

Para adaptar una máscara, cambia tanto la regla de formato como el texto de ejemplo del campo para que describan la misma forma. Este ejemplo da formato a un código de departamento de cuatro dígitos, seguido de un guion y dos dígitos. El formateador solo acepta dígitos y agrega el guion cuando se completa el primer grupo.

function formatDepartmentCode(value) {
  const digits = value.replace(/\D/g, "").slice(0, 6);
  return digits.length > 4
    ? `${digits.slice(0, 4)}-${digits.slice(4)}`
    : digits;
}

if (typeof document !== "undefined") {
  const departmentField = document.querySelector("#department-code");
  if (departmentField) {
    departmentField.addEventListener("input", () => {
      departmentField.value = formatDepartmentCode(departmentField.value);
    });
  }
}

Usa <input id="department-code" type="text" inputmode="numeric" placeholder="1234-56"> con esta regla. Para otro campo, decide qué caracteres conservar, cuántos mostrar y dónde colocar los separadores; después, actualiza el texto de ejemplo para que coincida. El texto de ejemplo es una indicación visual, no una regla de formato. Del mismo modo, un pattern de HTML comprueba si una cadena enviada coincide con una expresión, pero no inserta caracteres mientras la persona escribe. Mantén separadas la lógica de formato y la de validación, y valida el valor completo según los requisitos reales de tu formulario.