Gathering detailed insights and metrics for restricted-input
Gathering detailed insights and metrics for restricted-input
Gathering detailed insights and metrics for restricted-input
Gathering detailed insights and metrics for restricted-input
@terra-dev/use-restricted-input
Restrict text input
vue-restricted-input
Creates a pattern for restricted-input from data obtained from credit-card-type
use-restricted-input
Restricts key input to <input/> elements
react-restricted-input
Restrict text inputs to only accept certain characters.
Restrict <input>s to certain valid characters (e.g. formatting phone or card numbers)
npm install restricted-input
Typescript
Module System
Node Version
NPM Version
TypeScript (66.61%)
JavaScript (25.73%)
HTML (7.66%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
70 Stars
324 Commits
26 Forks
19 Watchers
41 Branches
81 Contributors
Updated on May 27, 2025
Latest Version
4.1.4
Package Id
restricted-input@4.1.4
Unpacked Size
53.56 kB
Size
13.17 kB
File Count
40
NPM Version
10.8.2
Node Version
18.20.7
Published on
Feb 26, 2025
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
1
26
Allow restricted character sets in input
elements.
Try the latest version of Restricted Input here.
Install dependencies
1nvm use # if you have node version manager installed 2npm i
Watch files and run demo server
1npm 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.
1npm 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
1cp .env.example .env
Fill in the BROWSERSTACK_USERNAME and BROWSERSTACK_ACCESS_KEY environmental variables with your credentials:
1BROWSERSTACK_USERNAME=username 2BROWSERSTACK_ACCESS_KEY=access_key
To run the integration tests in Safari, Google Chrome, Firefox, IE11 and Microsoft Edge:
1npm run development # in another terminal window 2npm run test:integration
To run tests in only one browser, prefix the test command with an ONLY_BROWSERS
env variable:
1# run only in edge browser 2ONLY_BROWSERS=edge npm run test:integration 3 4# run only in chrome browser 5ONLY_BROWSERS=chrome npm run test:integration 6 7# run only in ie 11 browser 8ONLY_BROWSERS=ie npm run test:integration 9 10# run only in safari browser 11ONLY_BROWSERS=safari npm run test:integration 12 13# run only in firefox browser 14ONLY_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:
1# run only in edge and chrome browsers 2ONLY_BROWSERS=edge,chrome npm run test:integration
To run only certain tests, add the .only
property before running the test:
1it.only('does something', function () {
1import RestrictedInput from "restricted-input"; 2 3const formattedCreditCardInput = new RestrictedInput({ 4 element: document.querySelector("#credit-card"), 5 pattern: "{{9999}} {{9999}} {{9999}} {{9999}}", 6});
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:
1const formattedCreditCardInput = new RestrictedInput({ 2 element: document.querySelector('#credit-card'), 3 pattern: '{{9999}} {{9999}} {{9999}} {{9999}}', 4 onPasteEvent: function (payload) { 5 var value = payload.unformattedInputValue; 6 7 if (requiresAmexPattern(value)) { 8 formattedCreditCardInput.setPattern('{{9999}} {{999999}} {{99999}}') 9 } else { 10 formattedCreditCardInput.setPattern('{{9999}} {{9999}} {{9999}} {{9999}}') 11 } 12 }) 13});
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.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
Reason
Found 9/29 approved changesets -- score normalized to 3
Reason
dependency not pinned by hash detected -- score normalized to 3
Details
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
10 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More