There is no standard way to have a field’s contents be readable while editing and obfuscated while at rest. The closest we get is the "password reveal" pattern, but that isn’t as customizable for regular fields. The form-obfuscator web component enables that.
character- The text character to replace each obfuscated character with. Default: *pattern(optional) - Regular expression to manage replacement. Matched characters will be kept, all other characters will be replaced. If no match is found, the whole string will be replaced.replacer(optional) - A custom replacement function that will be used to replace the value. Requirespatternbe set as well. The obfuscated value will be a result ofvalue.replace( pattern, replacer )where value is the original field value, pattern is a Regular Expression conversion ofpattern, and replacer is this function. All components of the replacer will need to be addressed viaarguments.maxlength(optional) - The maximum number of characters to display when obfuscating the text. This truncation is applied at the end of the replacement process.
This element will emit two custom JavaScript events:
form-obfuscator:hidewhen a field is obfuscatedform-obfuscator:revealwhen a field is obfuscated
On either event you can access the obfuscated field through the reference event.detail.field and the hidden field through the reference event.detail.hidden.
This web component makes no assumptions about markup. It will apply its logic to any text-style input elements it contains.
All field values will be duplicated into a hidden field, which is the field that will actually be submitted with the form. The source order will be such that the hidden field will be the one whose value is submitted.
<form-obfuscator>
<label for="my-field">Field Label</label>
<input id="my-field" name="foo">
</form-obfuscator>