DEV Community

Aaron Gustafson
Aaron Gustafson

Posted on • Originally published at aaron-gustafson.com on

A Web Component for Obfuscating Form Fields

#forms #html #javascript #progressiveenhanceme

We have the password reveal pattern for passwords, but what about other sensitive fields that need to be readable while editing and obfuscated while at rest? The form-obfuscator web component does exactly that.

# Basic usage

Wrap any text field in the component and it will automatically obfuscate the value when the field loses focus:

<form-obfuscator><labelfor=“secret-key-1”>What was your first pet’s name?</label><inputtype=“text”id=“secret-key-1”name=“secret-key-1”></form-obfuscator>
Enter fullscreen mode Exit fullscreen mode

When users click into the field, they see the actual value. When they click away, it’s replaced with asterisks (). The real value is preserved in a hidden field for form submission.

# Custom obfuscation characters

If you don’t like asterisks, you can specify any character you like:

<form-obfuscatorcharacter=“•”><labelfor=“account”>Account Number</label><inputtype=“text”id=“account”name=“account”></form-obfuscator>
Enter fullscreen mode Exit fullscreen mode

Or get creative:

<form-obfuscatorcharacter=“🤐”><labelfor=“ssn”>Social Security Number</label><inputtype=“text”id=“ssn”name=“ssn”></form-obfuscator>
Enter fullscreen mode Exit fullscreen mode

# Pattern-based obfuscation

Sometimes you want to show part of the value while hiding the rest. The pattern attribute lets you specify which characters to keep visible:

<form-obfuscatorpattern=“\d{4}$”><labelfor=“ssn”>Social Security Number</label><inputtype=“text”id=“ssn”name=“ssn”></form-obfuscator>
Enter fullscreen mode Exit fullscreen mode

This keeps the last four digits visible while replacing everything else with your obfuscation character. Perfect for Social Security Numbers, credit cards, or phone numbers where showing the last few digits helps users confirm they’ve entered the right value.

# Limiting displayed characters

Use the maxlength attribute to cap how many characters appear when obfuscated:

<form-obfuscatormaxlength=“4”><labelfor=“password”>Password</label><inputtype=“text”id=“password”name=“password”></form-obfuscator>
Enter fullscreen mode Exit fullscreen mode

Even if the user enters a 20-character value, only four asterisks will be displayed when the field is obfuscated. This prevents giving away information about the length of the information entered.

# Custom replacement functions

For complete control, you can provide a JavaScript function via the replacer attribute:

<script>window.emailReplacer=function(){var username = arguments[0][1];var domain = arguments[0][2];return username.replace(/./g,'‘)+ domain;}</script><form-obfuscatorpattern="^(.?)(@.+)$“replacer=”return emailReplacer(arguments)“><labelfor=”email“>Email Address</label><inputtype=”text“id=”email“name=”email“value=”user@example.com"></form-obfuscator>
Enter fullscreen mode Exit fullscreen mode

This example uses a pattern to separate the username from the domain, then obfuscates only the username portion, leaving @example.com visible.

Here’s another practical example for credit cards:

<script>functioncardNumberReplacer(){var beginning = arguments[0][1];var final_digits = arguments[0][2];return beginning.replace(/\d/g,'’)+ final_digits;}</script><form-obfuscatorpattern=“^((?:[\d]+-)+)(\d+)$”replacer=“return cardNumberReplacer(arguments)”><labelfor=“cc”>Credit Card</label><inputtype=“text”id=“cc”name=“cc”value=“1234-5678-9012-3456”></form-obfuscator>
Enter fullscreen mode Exit fullscreen mode

This displays as -- **** -3456, showing only the last group of digits.

# Combining attributes

You can combine these attributes for sophisticated obfuscation patterns:

<form-obfuscatorpattern=“\d{4}$”character=“•”maxlength=“16”><labelfor=“card”>Credit Card</label><inputtype=“text”id=“card”name=“card”></form-obfuscator>
Enter fullscreen mode Exit fullscreen mode

This keeps the last 4 digits visible, uses bullets for obfuscation, and limits the display to 16 characters total.

# Event handling

The component dispatches custom events when values are hidden or revealed:

const obfuscator = document.querySelector(‘form-obfuscator’);obfuscator.addEventListener(‘form-obfuscator:hide’,(e)=>{console.log(‘Field obfuscated:’, e.detail.field.value);});obfuscator.addEventListener(‘form-obfuscator:reveal’,(e)=>{console.log(‘Field revealed:’, e.detail.field.value);});
Enter fullscreen mode Exit fullscreen mode

You can access both the visible field and the hidden field through event.detail.field and event.detail.hidden respectively.

# How it works

The component creates a hidden input field to store the actual value for form submission. When the visible field loses focus, it:

  1. Copies the current value to the hidden field
  2. Applies your obfuscation rules to create the display value
  3. Updates the visible field with the obfuscated value
  4. Dispatches the form-obfuscator:hide event

When the field gains focus, it:

  1. Restores the real value from the hidden field
  2. Updates the visible field
  3. Dispatches the form-obfuscator:reveal event

The source order ensures the hidden field is the one that gets submitted with the form.

# Progressive enhancement

The component makes no assumptions about your markup—it works with any text-style input element. If JavaScript fails to load, the field behaves like a normal input, which is exactly what you want. Users can still enter and submit values; they just won’t get the obfuscation behavior.

# Demo

I’ve created a comprehensive demo page showing the various configuration options.

# Grab it

Check out the full project over on GitHub or install via npm:

npm install @aarongustafson/form-obfuscator
Enter fullscreen mode Exit fullscreen mode

Import and use:

import ‘@aarongustafson/form-obfuscator’;
Enter fullscreen mode Exit fullscreen mode

No dependencies, just a straightforward way to add field obfuscation to your forms.

Top comments (0)