<form-obfuscator> Web Component Demo

Basic Obfuscation

The simplest usage: wrap a form field with form-obfuscator to obfuscate its value when not focused.

<form-obfuscator>
  <label for="basic-example">
    Password
  </label>
  <input
    type="text"
    id="basic-example"
  />
</form-obfuscator>

Password

Try typing in the field, then clicking outside of it.

Custom Characters

Use the characters attribute to specify which characters to use for obfuscation. Default is "*".

<form-obfuscator character="•">
  <label for="bullet-example">
    Bullet Obfuscation
  </label>
  <input
    type="text"
    id="bullet-example"
  />
</form-obfuscator> 

<form-obfuscator character="X">
  <label for="x-example">
    X Obfuscation
  </label>
  <input
    type="text"
    id="x-example"
  />
</form-obfuscator>

Bullet Obfuscation

X Obfuscation

Pattern-Based Obfuscation

Use the pattern attribute to selectively obfuscate specific characters. Useful for formats like phone numbers, SSNs, or credit cards.

<form-obfuscator pattern="\d{4}$">
  <label for="ssn-example">
    SSN (shows last 4 digits)
  </label>
  <input
    type="text"
    id="ssn-example"
    placeholder="123-45-6789"
  />
</form-obfuscator> 

<form-obfuscator pattern="\d{4}$">
  <label for="phone-example">
    Phone (shows last 4 digits)
  </label>
  <input
    type="text"
    id="phone-example"
    placeholder="(555) 123-4567"
  />
</form-obfuscator>

SSN (shows last 4 digits)

Phone (shows last 4 digits)

The pattern matches the last 4 digits, keeping them visible while obfuscating everything else.

Maximum Length

Use the maxlength attribute to limit how many characters are displayed when obfuscated.

<form-obfuscator maxlength="4">
  <label for="max-example">
    Long Value (max 4 chars shown)
  </label>
  <input
    type="text"
    id="max-example"
    value="ThisIsAVeryLongPassword123"
  />
</form-obfuscator>

Long Value (max 4 chars shown)

Only the first 4 characters are shown when obfuscated.

Custom Replacer Function

Use the replacer attribute to reference a custom JavaScript function for complete control over obfuscation.

<script>
  window.customReplacer = (match) => {
    return match.split('').map((char, i) =>
      i % 2 === 0 ? char : '▪'
    ).join('');
  };
</script>

<form-obfuscator
  pattern=".*"
  replacer="return customReplacer(arguments[0])">
  <label for="replacer-example">
    Custom Replacer
  </label>
  <input
    type="text"
    id="replacer-example"
    value="HelloWorld"
  />
</form-obfuscator>

Custom Replacer

Every other character is obfuscated using a custom function.

Advanced Combinations

Combine pattern with custom replacer functions for sophisticated obfuscation behaviors.

Credit Card with Custom Replacer

<script>
  function cardNumberReplacer() {
    var beginning = arguments[0][1];
    var final_digits = arguments[0][2];
    return beginning.replace(/\d/g, '*') 
      + final_digits;
  }
</script>

<form-obfuscator
  pattern="^((?:[\d]+\-)+)(\d+)$"
  replacer="return cardNumberReplacer(arguments)">
  <label for="cc-replacer">
    Credit Card
  </label>
  <input
    type="text"
    id="cc-replacer"
    value="1234-5678-9012-3456"
  />
</form-obfuscator>

Credit Card

Pattern captures groups of digits separated by hyphens, keeping only the last group visible.

Email with Custom Replacer

<script>
  function emailReplacer() {
    var username = arguments[0][1];
    var domain = arguments[0][2];
    return username.replace(/./g, '*') 
      + domain;
  }
</script>

<form-obfuscator
  pattern="^(.*?)(@.+)$"
  replacer="return emailReplacer(arguments)">
  <label for="email-replacer">
    Email Address
  </label>
  <input
    type="text"
    id="email-replacer"
    value="user@example.com"
  />
</form-obfuscator>

Email Address

Pattern separates username from domain, obfuscating only the username portion.

Pattern + Character + Maxlength

<form-obfuscator
  pattern="\d{4}$"
  character="•"
  maxlength="16">
  <label for="combo-example">
    Credit Card (limited display)
  </label>
  <input
    type="text"
    id="combo-example"
    placeholder="1234-5678-9012-3456"
  />
</form-obfuscator>

Credit Card (limited display)

Combines pattern (last 4 digits), custom character (•), and max length (16 chars) for controlled display.

Real-World Example

A complete form demonstrating multiple obfuscated fields working together.

<form>
  <form-obfuscator>
    <label for="account-pwd">
      Password
    </label>
    <input
      type="text"
      id="account-pwd"
      name="password"
    />
  </form-obfuscator> 

  <form-obfuscator
    pattern="\d{4}$">
    <label for="account-ssn">
      SSN (last 4 visible)
    </label>
    <input
      type="text"
      id="account-ssn"
      name="ssn"
      placeholder="123-45-6789"
    />
  </form-obfuscator> 

  <form-obfuscator
    pattern="\d{4}$"
    character="•">
    <label for="account-cc">
      Credit Card (last 4 visible)
    </label>
    <input
      type="text"
      id="account-cc"
      name="credit_card"
      placeholder="1234-5678-9012-3456"
    />
  </form-obfuscator> 

  <button type="submit">
    Submit
  </button>
</form>

All sensitive fields are obfuscated when not in focus. Try clicking into a field to see the real value.

Event Handling

The component dispatches form-obfuscator:hide and form-obfuscator:reveal events when values are hidden or shown.

<script>
  const obfuscator = 
    document.querySelector(
      'form-obfuscator'
    );
  
  obfuscator.addEventListener(
    'form-obfuscator:hide',
    (e) => {
      console.log('Obfuscated:', 
        e.detail.field.value);
    }
  );
  
  obfuscator.addEventListener(
    'form-obfuscator:reveal',
    (e) => {
      console.log('Revealed:', 
        e.detail.field.value);
    }
  );
</script>

<form-obfuscator>
  <label for="event-example">
    Event Demo
  </label>
  <input
    type="text"
    id="event-example"
  />
</form-obfuscator>

Event Demo

Event log appears here... Focus and blur the field to see event logging below.

API Reference

For complete API documentation, see the project README: