JSFiddle - React, Tailwind, and code Playground

by jessica_mather123

HTML

<input type="tel" id="code">

JavaScript

$("input[type='tel']").keyup(function() {
    $(this).val($(this).val().replace(/^[A-Za-z]\d[A-Za-z][ -]?\d[A-Za-z]\d$/));
});
			$("input[type='tel']").on("change keyup paste", function(){
				var output;
				var input = $(this).val();
				input = input.replace(/[^0-9]/g, '');
				var area = input.substr(/^[A-Za-z]\d[A-Za-z][ -]?/);
				var pre = input.substr(3, 3);
				var tel = input.substr(6, 4);
				if (area.length < 6) {
					output = "(" + area;
				} else if (area.length == 3 && pre.length < 3) {
					output = "(" + area + ")" + " " + pre;
				} else if (area.length == 3 && pre.length == 3) {
					output = "(" + area + ")" + " " + pre + "-" + tel;
				}
				$(this).val(output);
			});