JavaScript Plugin/Script

input XXX-XXX-XXXX format

Download:

Tel_inp_formatter.js Tel_inp_formatter.min.js

Description

This script will format an input of type="text" or type="tel" into XXX-XXX-XXXX.

It listens on events click and keyup allowing only digits, arrow keys and delete and backspace.

This script works on all modern browsers including IE9 and above.

DEMO

Usage

Add the script to your page. Set the classname for all inputs elements that you wish to have formatted by the script. Pass the classname you set, as string to the setup function named setupTIFs("classname_string").

For example, if you set class="tel_input" then your JavaScript would simply be as follows:

setupTIFs("tel_input");

Advanced Notes

The Tel_inp_formatter class uses the .addEventListener() method which is not supported by IE8 and below. There are two event handlers, one for clicks and the other for keyups.

The minified script was minified using the closure compiler with the "Optimization:" level radio button selected to (O)Advanced rather than default ( )Simple and all unchecked defaults for formatting.

This page and all it contents are also posted at the following github link: github.com/nadeemelahi/telephone_input.

License

This telephone input formatting script is licensed under gpl v2. Free for business or personal use. Not for re-sale. Please release modified or improved versions under gpl v2 license too.

Download:
(same as top of page)

Tel_inp_formatter.js

Tel_inp_formatter.min.js

Copyright 2018 © nadeem.elahi@gmail.com