JSFiddle - React, Tailwind, and code Playground

by Sergey khorev

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>
Пример 1: <input  id="phone1" type="text" class="form-control">
<hr>
Пример 2: <input  id="date" type="text" class="form-control">
<input  id="index" type="text" class="form-control">
<hr>
Пример 3: <input  id="phone3" type="text" class="form-control">
<hr>
Пример 4: <input  id="number" type="text" class="form-control">
<hr>
Пример 5: <input  id="number2" type="text" class="form-control">
<hr>
Пример 6:
<input  id="color" type="text" class="form-control">
<hr>
Пример 7:
<hr>
<div class="form-group">
<label for="phone">Телефон: </label>
<select id="country" class="form-control">
  <option value="ru"><img src="">Россия +7</option>
  <option value="ua">Украина +380</option>
  <option value="by">Белоруссия +375</option>
</select>
<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

//1 пример
$(function(){
  $("#phone1").mask("8(999) 999-9999");
});
//2 пример
$("#date").mask("99.99.9999", {placeholder: "дд.мм.гггг" });
$("#index").mask("999999", {placeholder: " " });
//3
$("#phone3").mask("8(999) 999-9999", {
  completed: function(){ alert("Вы ввели номер: " + this.val()); }
});
//4
$("#number").mask("0.9?9");
//5
$.mask.definitions['~']='[+-]';
$("#number2").mask("~9.99");
$.mask.definitions['h']='[A-Fa-f0-9]';
$("#color").mask("#hhhhhh");

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