Как изменить формат номера телефона во вводе по мере ввода?
Мой Сайт CodePen: http://codepen.io/leongaban/pen/cyaAL
У меня есть поле ввода для номера телефона, который позволяет до 20 символов (для международных номеров).
Я также использую маскированный входной плагин jQuery by Джош для форматирования номера телефона на входе, чтобы сделать его "довольно".
моя проблема что в требованиях, когда телефон 10 цифр или меньше, он должен использовать Маскированное форматирование ввода.
однако, когда номер телефона длиннее 10 цифр, форматирование должно быть удалено.
вот мой текущий:CodePen, сотовый телефон-это поле ввода, в котором я пытаюсь это сделать. Рабочий телефон является примером функциональности по умолчанию Mask input plugin.
Как бы вы подошли к этой проблеме?
jQuery для поля ввода сотового телефона:
case '2':
console.log('created phone input');
$('.new_option').append(myphone);
$('.added_mobilephone').mask('(999) 999-9999? 9');
$('.added_mobilephone').keypress(function(event){
if (this.value.trim().length > 10) {
console.log('this.value = '+this.value.trim());
console.log('greater then 10');
$('.added_mobilephone').mask('99999999999999999999');
}
/*if (this.value.length < 9) {
console.log(this.value);
console.log('less then 10');
$('.added_mobilephone').mask('(999) 999-9999? 9999999999');
} else if (this.value.length > 9) {
console.log(this.value);
console.log('greater then 10');
$('.added_mobilephone').mask('99999999999999999999');
}*/
});
break;
8 ответов
вы, вероятно, уже решили эту проблему, но стоит отметить для дальнейшего использования, что кто-то еще с необходимостью применять несколько масок к элементу управления может захотеть изучить это плагин inputmask.
Он имеет больше обратных вызовов, настроек и многих типов масок из коробки(обязательно взгляните на файлы расширений). Вы также можете определить несколько масок для элемента управления, и плагин попытается применить соответствующую маску на основе значение.
вот скрипка демо предыдущем заявлении:
$(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' />
$("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>