function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Chris James 29Chris James 29 

Is there a way to input mask a Salesforce lightning-input component?

! am trying to write a custom Lightning Web Component that displays a single lightning-input text component and dynamically masks the input as the user enters it. By "masks" I mean it reformats the user's input as the user types.

For example, the user could type the 9 digits of a U.S. Social Security number and the mask would automatically insert the dashes in the correct places.

I have attempted to do this using third-party JavaScript libraries in two different ways:

1. Uploaded as a static resource and loaded into the component via loadScript().

2. Including the third-party library as its own Lightning Web Component and importing it.

In both cases I tried to apply the input mask to the input field inside the renderedCallback hook:
import { loadScript } from 'lightning/platformResourceLoader';
import vanillaTextMask from '@salesforce/resourceurl/vanillaTextMask';

async renderedCallback() {
  await loadScript(this, vanillaTextMask);
  const input = this.template.querySelector('lightning-input');
  vanillaTextMask.maskInput({
    inputElement: input,
    mask: [/\d/, /\d/, /\d/, '-', /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]
  });
}
import maskInput from 'c/textMask';

async renderedCallback() {
  const input = this.template.querySelector('lightning-input');
  maskInput({
    inputElement: input,
    mask: [/\d/, /\d/, /\d/, '-', /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]
  });
}

I've tried multiple libraries (text mask (https://github.com/text-mask/text-mask/tree/master/vanilla), Inputmask (https://github.com/RobinHerbots/Inputmask)), different values for the loadScript arguments, different querySelector arguments, and a plain input element as opposed to a lightning-input. The best result I've had so far is getting placeholder characters displaying in the input field on focus, ___-__-____, but even in this case, the typing is hindered as the cursor position constantly jumps to the end of the input after each character is typed. The input is not practically usable.

I wonder if the fact that querySelector returns a Proxy object as opposed to the actual DOM element is causing the issue.
Haider JamalHaider Jamal
nice article keep it up
very helps me
Hja Guru (https://hjaguru.blogspot.com/)
Alain CabonAlain Cabon
@Chris James.

Now the Lightning Web Components are very difficult to hack because of the Shadow DOM.

In return, the component lightning-input has plenty of attributes included pattern 

pattern Specifies the regular expression that the input's value is checked against. This attribute is supported for text, search, url, tel, email, and password types.

https://developer.salesforce.com/docs/component-library/bundle/lightning-input/specification

A pattern and a mask with fixed characters pre-existing directly in the input field by default are not the same but a placeholder + a pattern + an autocomplete could be an interesting alternative perhaps.
 
<template>
    <lightning-input type="tel"
                     label="Telephone"
                     value="343-343-3434"
                     pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
    </lightning-input>
</template>

Using Autocomplete in Input Fields
Some input types can be autofilled, based on your browser's support of the feature. The autocompleteattribute passes its value to the browser. These lighting-input types support the autocomplete attribute:
  • email
  • search
  • tel
  • text
  • url

lightning-input is very powerful but we must continue our efforts to master all its features.
I don't have tried a sample for the autocomplete yet (perhaps not appropriate for a "mask" at all).

With the lightning aura, I got these masks for all the phone numbers in the world (for free) so I know well this problem of mask for the input field ( I can do in Lightning Aura).
 
brad leebrad lee
Nice to see this and thanks for sharing the useful post and keep sharing the new things like this. Tellthebell is one of the famous and most important feedback option provided to customers by taco bell. Check this for more details. https://tellthebell.ninja