Demo - InputMask

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<div class="container">

  <h1>
    InputMask
  </h1>

  <p>
    The InputMask control allows you to validate and format user
    input as it is entered, preventing invalid data.</p>
  <p>
    To use the InputMask control, set the <b>mask</b> property 
    to a string that specifies the valid character classes for each 
    input position as described in the
    <a href="https://wijmo.com/5/docs/topic/wijmo.input.InputMask.Class.html" target="_blank">InputMask documentation</a>.
  </p>
  <p>
    Here are a few examples to demonstrate:</p>
  
  <label for="theSSN">Social Security Number</label>
  <input id="theSSN"><br>
  <label for="theZip">Zip Code</label>
  <input id="theZip"><br>
  <label for="theZip4">Zip+4 Code</label>
  <input id="theZip4"><br>
  <label for="thePhone">Phone Number</label>
  <input id="thePhone"><br>

  <p>
    By default, typing into the <b>InputMask</b> inserts text
    at the cursort position. In some cases, you may want to 
    overwrite the text instead. Click the checkbox below to 
    see the difference:
  </p>
  <label>
    Enable Overwrite
    <input id="overwrite" type="checkbox">
  </label>
</div>

CSS

.wj-inputmask {
  margin-bottom: 6px;
}
label {
  width: 180px;
  text-align: right;
}
body {
  margin-bottom: 48px;
}

JavaScript

onload = function() {

	// create some InputMask controls
	theSSN = new wijmo.input.InputMask('#theSSN', {
  	mask: '000-00-0000'
  });
	theZip = new wijmo.input.InputMask('#theZip', {
  	mask: '00000'
  });
	theZip4 = new wijmo.input.InputMask('#theZip4', {
  	mask: '00000-0000'
  });
	thePhone = new wijmo.input.InputMask('#thePhone', {
  	mask: '(999) 000-0000'
  });

	// enable overwrite mode on all input mask controls
  // https://stackoverflow.com/questions/2561110/javascript-to-make-input-field-in-edit-modeinsert-mode
  var overwrite = document.getElementById('overwrite');
  document.body.addEventListener('keypress', function(e) {
  	if (overwrite.checked) { // overwrite enabled
  		if (e.target.tagName == 'INPUT') { // target is input element
    		if (wijmo.closest(e.target, '.wj-inputmask')) { // contained in an InputMask control
	  			var input = e.target,
		  	  		value = input.value,
		    	    start = input.selectionStart;
		    	input.value = value.substr(0, start) + value.substr(start + 1);
		    	input.selectionEnd = start;
		    }
	    }
		}
  });
}