formatPhoneNumber

Adds typical formatting to phone number

by robhortn

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <label class="col-md-5" for="phoneNumber">Enter your phone number</label>
          <div class="col-md-6">
            <input id="phoneNumber" name="phoneNumber" type="text" class="form-control input-md" onkeypress="return isNumber(event)" onkeyup="setPhoneFormat(this)" maxlength="14"/>
          </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label class="col-md-5" for="phoneNumber">Enter alternate phone number</label>
          <div class="col-md-6">
            <input id="phoneNumberAlt" name="phoneNumberAlt" type="text" class="form-control input-md" onkeypress="return isNumber(event)" onkeydown="setPhoneFormatLive(this)" maxlength="14"/>
          </div>
      </div>
    </div>
  </div>
</body>

CSS

body {
  margin: 120px auto;
  width: 300px;
}

JavaScript

function isNumber(evt) {
    //evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    console.log(charCode);
    if (charCode === 8) {
    	console.log("you be backspacin!");
    }
    
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}

function setPhoneFormat(src) {
		var x = src.value;
    x = x.replace(/[^0-9]/g, "");
    
    //console.log('stripped x says: ' + x);
    
    if (x.length == 10) {
    	var areaCode = x.substr(0,3);
      var exchangeNum = x.substr(3,3);
      var phoneNum = x.substr(6,4);
      src.value = "(" + areaCode + ") " + exchangeNum + "-" + phoneNum;
    }
}

function setPhoneFormatLive(src) {
		var x = src.value;
    var areaCode = "";
    var exchangeNum = "";
    var phoneNum = "";
    
    x = x.replace(/[^0-9]/g, "");
    
    if (x.length == 3) {
    	areaCode = x.substr(0,3);
    	src.value = "(" + areaCode + ") "
    }
    
    if (x.length == 11) {
      exchangeNum = x.substr(3,3);
      phoneNum = x.substr(6,4);
      src.value = "(" + areaCode + ") " + exchangeNum + "-" + phoneNum;
    }
}