Maskedinput ЕАС

маска ввода телефона для России, Казахстана, Белоруссии

by Miken912

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>
<script src="https://cdn.countryflags.com/download/russia/flag-png-icon-16.png"></script>

<label for="phone">Телефон: </label>
<div class="input-group">
  <div class="input-group-btn">
<select id="country" class="btn btn-default dropdown-toggle">
  <option value="ru"><img src="flag-png-icon-16.png">Россия</option>
  <option value="kz">Казахстан</option>
  <option value="by">Белоруссия</option>
</select>
</div>
<input id="phone" type="text" class="form-control">
</div>

CSS

body {
  padding: 30px;  
}
hr {
  margin: 5px 0 5px;
}
input {
  display: inline-block !important;
  width: auto !important;
}
#country, #phone {
  display: inline-block;
  width: auto;
}
label[for="phone"] {
  display: block;
}

JavaScript

$(function() {
    function maskPhone() {
      var country = $('#country option:selected').val();
      switch (country) {
        case "ru":
          $("#phone").mask("+7(999) 999-99-99");
          break;
        case "kz":
          $("#phone").mask("+7(999) 999-99-99");
          break;
        case "by":
          $("#phone").mask("+375(999) 999-99-99");
          break;          
      }    
    }
    maskPhone();
    $('#country').change(function() {
      maskPhone();
    });
  });