JSFiddle - React, Tailwind, and code Playground

by Ahmad Asjad

HTML

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<input type="text" class="us_phone" />

JavaScript

$(document).ready(function(){
	$('body').on('blur','.us_phone',function(){
		formatPhone($(this));
	});
	$('body').on('keyup','.us_phone',function(event){
		event = event || window.event;
		if((event.which>95 && event.which<106) || (event.which>47 && event.which<58)){
			formatPhone($(this));
		}
	});
});


function formatPhone(obj) {
    var numbers = obj.val().replace(/\D/g, '');
    var char = {0:'',3:'-',6:'-'};
    var new_value = '';
    for (var i = 0; i < numbers.length; i++) {		
			new_value += (char[i]||'') + numbers[i];		      
    }
	new_value = new_value.substr(0, 12);
	obj.val(new_value);
}