restrict-js

Only allow certain character can be type in input text.

Usage no npm install needed!

<script type="module">
  import restrictJs from 'https://cdn.skypack.dev/restrict-js';
</script>

README

Restrict JS

Restrict JS useful when you want to prevent or allow certain character for the input fields. For example the phone number field you maybe want to allow people to insert numeric only or numeric with plus.

When you use Restrict JS, when you copy and paste something into the input text, it will not allowed.

By default, all the keyboard buttons are allow

backspace
delete
shift
left arrow
right arrow
up arrow
down arrow

Browsers support

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
iOS Safari
iOS Safari
Samsung
Samsung
Opera
Opera
IE9++, Edge

How To Install

NPM
npm install --save restrict-js

Yarn
yarn add restrict-js

Demo

How To Use

Import the javscript file

import 'restrict-js'

or

<script src="restrict-js.min.js"></script>

Add data-restrict-js at your input field. For example you want to accept only alpha numeric. You can set the value as alphanumeric

data-restrict-js="alphanumeric"

Example input field

<input id="phone_number" name="phone_number" type="text" class="form-control" data-restrict-js="numeric">

Available predefined rules

alpha - Only allow alphabet. A-Z
numeric - Only allow numeric. 0-9
alphanumeric - Only allow alphabet numeric. A-Z,0-9
alphaspace - Only allow alphabet and space.
alphadash - Only allow alphabet and dash (-)
email - Only allow alphabet, numeric, @ (alias), . (dot), - (hypen), _ (underscore)
url - Only allow alphabet, numeric, : (colon), . (dot), / (forward slash)