Restrict inputs to certain valid characters (e.g. formatting phone or card numbers)
npm install credit-card-input-mask> forked from braintree/restricted-input
Allow restricted character sets in input elements.
``bash`
$ npm install --save credit-card-input-mask
`javascript
import CreditCardInputMask from "credit-card-input-mask";
const formattedCreditCardInput = new CreditCardInputMask({
element: document.querySelector("#credit-card"),
pattern: "{{9999}} {{9999}} {{9999}} {{9999}}",
});
`
> Demo
Patterns are a mixture of Placeholders and PermaChars.
A Placeholder is the part of the pattern that accepts user input based on some restrictions. A placeholder is defined in the pattern using two open curly brackets, the placeholder, followed by two closing curly brackets e.g. {{Abc123}}.
The patterns a Placeholder can be are:
- a single alpha character that matches the alpha regex /[A-Za-z]/. e.g. {{C}} will match one alpha character./[0-9]/
- a single digit that matches the digit regex . e.g. {{3}} will match one digit.
- a character that matches /./. e.g. {{}} will match the next character.
A PermaChar is the part of the pattern that is automatically inserted. PermaChars are defined in the pattern as any characters other than Placeholders.
Some example patterns with behavior are listed:
- 12{{3}}12
- Inserts .{{A}}BC
- Waits for a single digit from the user.
- BC
- Waits for a single alpha from the user.
- Inserts .${{*2L}}E
- $
- Inserts .E
- Waits for any single character input from the user.
- Waits for a single digit from the user.
- Waits for a single alpha from the user.
- Inserts .
If an input is changed via a paste event, you may want to adjust the pattern before input formatting occurs. In this case, pass an onPasteEvent callback:
`js
const formattedCreditCardInput = new RestrictedInput({
element: document.querySelector('#credit-card'),
pattern: '{{9999}} {{9999}} {{9999}} {{9999}}',
onPasteEvent: function (payload) {
var value = payload.unformattedInputValue;
if (requiresAmexPattern(value)) {
formattedCreditCardInput.setPattern('{{9999}} {{999999}} {{99999}}')
} else {
formattedCreditCardInput.setPattern('{{9999}} {{9999}} {{9999}} {{9999}}')
}
})
});
`
| Key | Type | Description |
| ------------ | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| element | HTMLInputElement or HTMLTextAreaElement | A valid reference to an input or textarea DOM node |String
| pattern | | Pattern describing the allowed character set you wish for entry into corresponding field. See Patterns. |Function
| onPasteEvent | (optional) | A callback function to inspect the unformatted value of the input during a paste event. See Paste Event. |
- restricted-input - Allow restricted character sets in input` elements.