Allow restricted character sets in input
elements.
Try the latest version of Restricted Input here.
Install dependencies
source-shell
nvm use # if you have node version manager installed
npm i
Watch files and run demo server
source-shell
npm run development
This will start a server on port 3099
which can be overridden with the PORT
env var.
Unit tests
The following command will run the linting task and the unit tests.
source-shell
npm test
Integration tests
We use Browserstack to automate end to end testing on Google Chrome, Safari, Firefox, Microsoft Edge, and Internet Explorer 11.
First, sign up for a free open source Browserstack account.
Copy the .env.example
file to .env
source-shell
cp .env.example .env
Fill in the BROWSERSTACK_USERNAME and BROWSERSTACK_ACCESS_KEY environmental variables with your credentials:
source-shell
BROWSERSTACK_USERNAME=username
BROWSERSTACK_ACCESS_KEY=access_key
To run the integration tests in Safari, Google Chrome, Firefox, IE11 and Microsoft Edge:
source-shell
npm run development # in another terminal window
npm run test:integration
To run tests in only one browser, prefix the test command with an ONLY_BROWSERS
env variable:
source-shell
# run only in edge browser
ONLY_BROWSERS=edge npm run test:integration
# run only in chrome browser
ONLY_BROWSERS=chrome npm run test:integration
# run only in ie 11 browser
ONLY_BROWSERS=ie npm run test:integration
# run only in safari browser
ONLY_BROWSERS=safari npm run test:integration
# run only in firefox browser
ONLY_BROWSERS=firefox npm run test:integration
To run tests in certain browsers, prefix the test command with an ONLY_BROWSERS
env variable, with each browser comma separated:
source-shell
# run only in edge and chrome browsers
ONLY_BROWSERS=edge,chrome npm run test:integration
To run only certain tests, add the .only
property before running the test:
source-js
it.only('does something', function () {
source-js
import RestrictedInput from 'restricted-input';
const formattedCreditCardInput = new RestrictedInput({
element: document.querySelector('#credit-card'),
pattern: '{{9999}} {{9999}} {{9999}} {{9999}}'
});
Patterns are a mixture of Placeholder
s and PermaChar
s.
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-Za-z]/
. e.g. {{C}}
will match one alpha character./[0-9]/
. e.g. {{3}}
will match one digit.*
character that matches /./
. e.g. {{*}}
will match the next character.A PermaChar
is the part of the pattern that is automatically inserted. PermaChar
s are defined in the pattern as any characters other than Placeholder
s.
Some example patterns with behavior are listed:
12{{3}}
12
.{{A}}BC
BC
.${{*2L}}E
$
.E
.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:
source-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 |
pattern | String |
Pattern describing the allowed character set you wish for entry into corresponding field. See Patterns. |
onPasteEvent | Function (optional) |
A callback function to inspect the unformatted value of the input during a paste event. See Paste Event. |
Desktop
Old versions of Samsung Android browsers are incompatible with formatting. These will not attempt to intercept the values and format the input.
#vuejs #javascript #vue-js #vue