MaskerJS Demo

Using MakerJS to pretty format raw input from a user.

HTML

<script src="https://mike96angelo.github.io/Masker/src/masker.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
vanilla: <input id="input1" placeholder="+1-234-567-8900">
<br>
<br>
jQuery: <input id="input2" placeholder="+1-234-567-8900">

CSS

input {
  outline: none;
  border-radius: 5px;
  border: 1px solid black;
  text-align: center;
  height: 25px;
  width: 130px;
}

JavaScript

var telMask = new Masker(
    [
        '___-____',            // local
        '(___) ___-____',      // area
        '+_-___-___-____',     // international
    ],
    /^[0-9]$/ // allowed chars
);

// vanilla
var telInput = document.getElementById('input1');
telMask.mask(telInput);

// jQuery plugin
Masker.jQueryPlugin($);
$('#input2').mask(telMask);