Real-Time Input Masking

Technical Deep Dive & Specifications

The Anatomy of the Cursor Jumping Problem

When a user edits an input in the middle of a string:

1. User types digit '5' at index 7 in "4111 11|11 1111".
2. The input event triggers.
3. JavaScript reformats the string to "4111 1151 1111 1".
4. JavaScript assigns input.value = newString.
5. Browser Default Behavior: Assigning to .value resets selectionStart and selectionEnd to newString.length (the very end).
6. Result: The user is typing in the middle, but subsequent keystrokes appear at the end!

BEFORE REFORMAT:
  Value:  "4 1 1 1   1 1 [5] 1   1 1 1 1"
  Cursor:                 ^ (Index 7: 5 raw digits prior)

NAIVE REFORMAT:
  Value:  "4 1 1 1   1 1 5 1   1 1 1 1"
  Cursor:                               ^ (Index 15 - JUMPED TO END!)

ALGORITHMIC CURSOR RESTORATION:
  1. Count unmasked characters before old cursor = 5 digits ('4','1','1','1','1').
  2. Format new raw string -> "4111 1151 1111 1".
  3. Walk formatted string until 5 raw digits are encountered.
  4. Target cursor position = index 8.
  5. input.setSelectionRange(8, 8).

The Cursor Preservation Algorithm

function formatWithCursorPreservation(input, formatterFn) {
  const previousValue = input.value;
  const previousCursor = input.selectionStart;

  // 1. Count raw valid digits before the cursor prior to formatting
  const digitsBeforeCursor = previousValue
    .slice(0, previousCursor)
    .replace(/\D/g, '').length;

  // 2. Compute formatted value from raw characters
  const rawDigits = previousValue.replace(/\D/g, '');
  const formattedValue = formatterFn(rawDigits);

  // 3. Update DOM value
  input.value = formattedValue;

  // 4. Find new cursor position matching the raw digit count
  let newCursor = 0;
  let digitCount = 0;
  for (let i = 0; i < formattedValue.length; i++) {
    if (/\d/.test(formattedValue[i])) {
      digitCount++;
    }
    if (digitCount === digitsBeforeCursor) {
      newCursor = i + 1;
      break;
    }
  }

  // Edge case: if no digits before cursor, place at start
  if (digitsBeforeCursor === 0) newCursor = 0;

  // 5. Restore cursor position
  input.setSelectionRange(newCursor, newCursor);
}

Common Mask Formatting Rules

+-------------------------------------------------------------------------------+
| Pattern Name      | Format Template       | Regex Token Transformation        |
+-------------------------------------------------------------------------------+
| Standard Credit   | #### #### #### ####   | (\d{4})(?=\d) -> '$1 '            |
| Amex Card         | #### ###### #####     | (\d{4})(\d{6})? -> '$1 $2 $3'     |
| US Phone Number   | (###) ###-####        | (\d{3})(\d{3})(\d{4})             |
| Expiration Date   | MM/YY                 | (\d{2})(?=\d) -> '$1/'            |
+-------------------------------------------------------------------------------+

Mobile Input Optimizations

Masking must be paired with correct HTML5 mobile hints:

• inputmode="numeric": Pops up the numeric dial pad on iOS/Android without showing the full alpha keyboard.
• autocomplete="cc-number": Enables 1-tap browser autofill and camera card scanning.
• autocomplete="tel": Enables phone number autofill from contacts.

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Lines 101–105 (const digitsBeforeCursor = ...): Analyzes the substring from index 0 up to selectionStart, counting purely numeric digits while ignoring space or punctuation delimiters.
• Line 108 (const raw = prevVal.replace(/\D/g, '')): Cleans the input stream of all non-numeric characters before passing to the pattern formatter.
• Line 111 (inputElement.value = formatted): Updates the DOM input string with appropriate spacing, dashes, or parentheses.
• Lines 114–121 (for (let i = 0; i < formatted.length; i++)): Iterates through the freshly formatted string to map where the Nth digit now resides, pinpointing the exact character index for the caret.
• Line 124 (inputElement.setSelectionRange(newCursor, newCursor)): Programmatically pins the cursor at the calculated position, eliminating cursor jumping bugs.
• Lines 134–146 (ccBadge detection): Checks the Major Industry Identifier (MII) prefixes (4 for Visa, 51–55 for Mastercard, 34/37 for American Express) and switches formatting from 4-4-4-4 to 4-6-5 on the fly.

Expected Browser Render Output

(Typing in the middle of any field immediately retains the caret directly adjacent to the edited digit rather than snapping to the end.)

+-----------------------------------------------------------+
| Payment & Contact Details                                 |
|                                                           |
| Credit Card Number                                        |
| [ 4111 2222 3333 4444                       ] [ VISA ]    |
|                                                           |
| Expiry Date            Phone Number                       |
| [ 12/28              ] [ (415) 555-0199                 ] |
|                                                           |
| Raw State: CC Raw: "4111222233334444" | Exp: "12/28" ...  |
+-----------------------------------------------------------+