如何在输入时更改输入中的电话号码格式？

我的CodePen： http ：//codepen.io/leongaban/pen/cyaAL

我有一个电话号码的输入字段，最多允许20个字符（国际号码）。

我还使用Josh Bush的Masked输入jQuery插件来格式化输入中的电话号码以使其“漂亮”。

• 我的问题是，在电话是10位或更少的要求时，它应该使用Masked输入格式。

• 但是，当电话号码长于10位时，应删除格式。

---

这是我目前的： CodePen ，手机是输入字段，我正在努力实现这一目标。 Work Phone是Mask输入插件的默认function的一个示例。

你会怎么解决这个问题？

jQuery for Cell Phone输入字段：

case '2': console.log('created phone input'); $('.new_option').append(myphone); $('.added_mobilephone').mask('[phone]? 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('greater then 10'); $('.added_mobilephone').mask('99999999999999999999'); }*/ }); break; 

Answer 1

您可能已经解决了这个问题，但值得注意的是，将来需要将多个掩码应用于控件的其他人可能想要探索此输入掩码插件 。

它有更多的回调，设置和许多开箱即用的掩码类型（请务必查看扩展文件）。 您还可以为控件定义多个掩码，插件将尝试根据值应用适当的掩码。

这是演示前一个声明的小提琴 ：

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

Answer 2

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

这肯定会有效:)

Answer 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'); } }); }); 

Answer 4

我尝试了一些非插件的答案，但不幸的是，他们在编辑电话号码时有不良副作用。 这是一个我最终创建的解决方案，它很简单，没有特殊的外部第三方lib依赖项：

• 不需要任何插件 – >只需JS和JQuery
• 自动过滤掉非数字（即噪音）
• 删除数字时，class次会保留电话号码
• 维护格式/删除时不会中断
• 如果没有任何改变就什么都不做，例如允许光标向左/向右移动以与其他使光标挂钩结束的解决方案进行更改

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); }); 

Answer 5

在你的情况下

与jasny bootstrap插件

小提琴演示

Answer 6

输入类型文本输入类型电话号码。 max-length，占位符使用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); 

Answer 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); }); 

        
 
 
 Phone 
   
 
 
  

Answer 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); }); });