Text Mask let's you turn a plain <input />
, into one that conforms
any user input, as they type, to a given mask pattern.
Live demo
To see Text Mask in action, checkout the demo page.
Installation and usage
Features
Expected to work with...
IE9+, Android, Samsung Internet, Windows Phone, iOS, Opera, Firefox, Safari, and Chrome
Masking characters
Character | Description |
---|---|
1 |
Any number |
A |
Any letter |
? |
Any number or letter |
U |
Any letter (will be transformed to uppercase) |
L |
Any letter (will be transformed to lowercase) |
Escapable masking characters
The mask also supports escaping, so you can use a masking character within the mask. For example
+\1 111-1111
The first 1
is not a masking character but part of the mask. For more information, see the
documentation here.
Guide mode
Guide mode prints out placeholder characters and the mask itself as the user types
No-guide mode
No-guide mode doesn't print out placeholder characters and only adds mask characters when the user reaches them
Ability to customize placeholder character
You can change the placeholder character from _
(underscore) to anything you want. For example,
you can use the unicode character U+2000
(\u2000
in JavaScript), which is white space to
create a mask for phone number that looks like
+1 ( ) -
Or for date
/ /
Other features
- Supports pasting
- Supports browser auto-fill
- It is small, around 3KB gzipped
For support, questions, or suggestions
Please file an issue or tweet at me.
License
Public domain - CC0 1.0 Universal