Как изменить формат номера телефона во вводе по мере ввода?

$("input[name='phone']").keyup(function() {
    $(this).val($(this).val().replace(/^(\d{3})(\d{3})(\d)+$/, "()-"));
});

Это будет работать точно :)

Это было очень полезно, я только добавляю код, чтобы он работал, когда пользователь удаляет некоторые символы, я дал возможность вводить только цифры и максимальную длину. Это работает для меня :)

$(document).ready(function(){
  /***phone number format***/
  $(".phone-format").keypress(function (e) {
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
      return false;
    }
    var curchr = this.value.length;
    var curval = $(this).val();
    if (curchr == 3 && curval.indexOf("(") <= -1) {
      $(this).val("(" + curval + ")" + "-");
    } else if (curchr == 4 && curval.indexOf("(") > -1) {
      $(this).val(curval + ")-");
    } else if (curchr == 5 && curval.indexOf(")") > -1) {
      $(this).val(curval + "-");
    } else if (curchr == 9) {
      $(this).val(curval + "-");
      $(this).attr('maxlength', '14');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="phone-format"  type="text" placeholder="Phone Number">

я попробовал некоторые ответы без плагинов, но, к сожалению, они имели нежелательные побочные эффекты при редактировании номера телефона. Вот решение, которое я в конечном итоге создал, которое просто и не имеет специальной внешней зависимости lib 3rd party:

• не требует никаких плагинов --> просто JS и JQuery
• автоматически отфильтровывает не-цифры (т. е. шум)
• сдвиги оставили цифры номера телефона на удаление цифр
• формат поддерживает / не ломается при удалении
• ничего не делает, если ничего не меняется, например, позволяет курсору перемещаться влево / вправо, чтобы внести изменения против других решений, которые удерживали курсор привязанным к концу

предостережение: рассматриваемый номер телефона-это только Северная Америка, которая была прекрасна в моем случае, так как это использовалось для регистрации футбола местного сообщества в Канаде.

$("input[name='phone_num']").keyup(function() {
  var val_old = $(this).val();
  var val = val_old.replace(/\D/g, '');
  var len = val.length;
  if (len >= 1)
    val = '(' + val.substring(0);
  if (len >= 3)
    val = val.substring(0, 4) + ') ' + val.substring(4);
  if (len >= 6)
    val = val.substring(0, 9) + '-' + val.substring(9);
  if (val != val_old)
    $(this).focus().val('').val(val);
});

в вашем случае

<input type="text" class="form-control" data-mask="(999) 999-9999">

С jasny bootstrap плагин

демо на скрипке

тип ввода текста для ввода введите телефонный номер. max-длина, заполнитель с помощью jquery.

// Used to format phone number and add placeholder and max-length
function phoneFormatter() {
 $(' input[type="text"]').attr({ placeholder : '(___) ___-____' });
  $('input[tabindex="111"]').on('input', function() {
    var number = $(this).val().replace(/[^\d]/g, '')
    if (number.length == 7) {
      number = number.replace(/(\d{3})(\d{4})/, "-");
    } else if (number.length == 10) {
      number = number.replace(/(\d{3})(\d{3})(\d{4})/, "() -");
     
    }
    $(this).val(number)
    $('input[type="text"]').attr({ maxLength : 10 });
    
  });
};

$(phoneFormatter);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="input_111[]" value="" tabindex="111">

аналогичное решение, но в этом скрипте формат применяется при вводе. Добавление маски в номер телефона-бразильский формат телефона (00)?0000-0000. Это может быть полезно и для других.

    //Add mask (00) ?0000-0000 in the phone number - Brazil Format
    $('#iTel').on("keyup blur", function(e){
    	var v = $(this).val();
    	v = v.replace(/[^\d]/g,'');
    	if(v.length < 6){
    		v = v.replace(/(\d{2})/, '() ');
    	}else if(v.length < 10){
    		v = v.replace(/(\d{2})(\d{4})/, '() -');
    	}else if(v.length < 11){
    		v = v.replace(/(\d{2})(\d{4})(\d{4})/, '() -');				
    	}else {
    		v = v.replace(/(\d{2})(\d{5})(\d{4})/, '() -');
    	}
    $(this).val(v);		
       });

    <!DOCTYPE html>
     <html lang="en">
     <head>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>
    <form method="post" id="cadForm" action="incluir.php">
    <div class="form-row">
     <div class="form-group col-md-12">
    	<label for="iTel" class="col-form-label">Phone</label>
    	<div class="input-group">
    	<span class="input-group-addon"><i class="fa fa-phone" aria-hidden="true"></i></span>
    	<input type="text" class="form-control" name="iTel" id="iTel" maxlength="15" placeholder="(xx) ?xxxx-xxxx..." pattern="[(][0-9]{2}[)][\s][0-9]{4,5}[-][0-9]{4}$" title="Please, type only number: (00) ?0000-0000">
    	</div>			
    </div>
      </body>
     </html>

Окно снизу вверх прокрутите липкое меню с помощью jquery.

  var lastScroll = 0;

  $(document).ready(function($) {

  $(window).scroll(function(){

  setTimeout(function() { 
        var scroll = $(window).scrollTop();
        if (scroll > lastScroll) {

            $("header").removeClass("menu-sticky");

        } 
        if (scroll == 0) {
        $("header").removeClass("menu-sticky");

        }
        else if (scroll < lastScroll - 5) {


            $("header").addClass("menu-sticky");

        }
        lastScroll = scroll;
        },0);
        });
       });
 </script>