Handling Forms & User Input

What input handling technique does this demonstrate?

const masks = {
  phone: value => value.replace(/\D/g, '')
    .replace(/^(\d{3})(\d{3})(\d{4})$/, '($1) $2-$3'),
  zipcode: value => value.replace(/\D/g, '')
    .replace(/^(\d{5})(\d{0,4})$/, '$1-$2')
};

form.addEventListener('input', e => {
  const mask = e.target.dataset.mask;
  if (mask && masks[mask]) {
    const value = e.target.value;
    const pos = e.target.selectionStart;
    const newValue = masks[mask](value);
    if (newValue !== value) {
      e.target.value = newValue;
      e.target.setSelectionRange(pos, pos);
    }
  }
});

Input validation
Input formatting
Input masking
This demonstrates input masking, a technique for formatting user input in real-time: 1) Automatically formats input according to predefined patterns, 2) Maintains cursor position for natural typing experience, 3) Handles both insertion and deletion correctly, 4) Uses data attributes for declarative mask assignment, 5) Supports multiple mask types through a single handler, 6) Particularly useful for phone numbers, dates, credit cards, etc.
Input filtering

Next Question (18/20)