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

Ответ 1

Вероятно, вы уже решили эту проблему, но стоит упомянуть в будущем ссылку на то, что кто-то еще с необходимостью применять несколько масок к элементу управления может захотеть изучить этот модуль ввода маска.

У него больше обратных вызовов, настроек и многих типов масок окна (обязательно посмотрите на файлы расширений). Вы также можете определить несколько масок для элемента управления, и плагин попытается применить соответствующую маску на основе значения.

Вот скрипка для демонстрации предыдущего заявления:

$(window).load(function()
{
   var phones = [{ "mask": "(###) ###-####"}, { "mask": "(###) ###-##############"}];
    $('#textbox').inputmask({ 
        mask: phones, 
        greedy: false, 
        definitions: { '#': { validator: "[0-9]", cardinality: 1}} });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.1.62/jquery.inputmask.bundle.js"></script>
<input type='text' id='textbox' />

Ответ 2

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

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

/* example jquery use */

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

/* use your css to beautify the form */

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- form input for example user -->
<form>
  <input type="text" name="phone" placeholder="Phone Number" />
</form>

Ответ 3

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

$(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">

Ответ 4

В твоем случае

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>

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

Ответ 5

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

• Не требует никаких плагинов → просто JS и JQuery
• Автоматически отключает без цифр (т.е. шум)
• Сдвиги оставили цифры номера телефона при удалении цифр
• Поддерживает формат/не разбивается на удаление
• Делает ничего, если ничего не меняется, например. позволяет курсору перемещаться влево/вправо, чтобы делать изменения по сравнению с другими решениями, которые привязывали курсор к концу.

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

$("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);
});

Ответ 6

Введите тип текста для ввода номера телефона. max-length, placeholder с использованием 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})/, "$1-$2");
    } else if (number.length == 10) {
      number = number.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");
     
    }
    $(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">

Ответ 7

Аналогичное решение выше, но в этом сценарии формат применяется, пока пользователь печатает. Добавляем маску в телефонный номер - бразильский формат телефона (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})/, '($1) ');
    	}else if(v.length < 10){
    		v = v.replace(/(\d{2})(\d{4})/, '($1) $2-');
    	}else if(v.length < 11){
    		v = v.replace(/(\d{2})(\d{4})(\d{4})/, '($1) $2-$3');				
    	}else {
    		v = v.replace(/(\d{2})(\d{5})(\d{4})/, '($1) $2-$3');
    	}
    $(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>

Ответ 8

Окно внизу вверх прокручивает липкое меню с помощью 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>