Real-time Input Field Formatting – input-mask.js

Preview:

Description:

A tiny input mask JavaScript library that automatically formats input values (like phone numbers and zip codes) while typing.

How to use it:

1. Download and include the input-mask.js JS library on the page.

<script src=”./js/input-mask.js”></script>

2. Define your own format pattern in the data-pattern attribute. That’s it.

<input class="masked" 
       type="tel" 
       data-pattern="+*(***)***-**-**" 
       placeholder="+1(234)567-89-10">

3. Add a prefix to the formatted value.

<input class="masked prefixed" 
       type="tel" 
       data-pattern="+**(***) *(**)-**-**" 
       data-prefix="+99(888)" 
       placeholder="+99(888) 1(23)-45-67" />