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

我CodePen：http://codepen.io/leongaban/pen/cyaAL 如何在输入时更改输入中的电话号码格式？

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

我还使用Masked input jQuery plugin作者：Josh Bush来格式化输入中的电话号码以使其“相当”。

我的问题是，在需求的时候，手机为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;

来源

2013-07-31 Leon Gaban

你检查出这个问题了吗？ http://stackoverflow.com/questions/2580550/how-to-get-the-jquery-maskedinput-unmask-function-to-work-properly 这个问题的方法检查指示国际＃或没有的框可能是好的还有一个用户体验的观点（在你目前的版本中，当最初使用默认的美国电话格式时，国际用户可能会感到困惑） –

哦，谢谢你的链接！现在检查出来，会看看我能否更好地工作 –

您可能已经解决了这个问题，但它是值得一提供将来参考其他任何人与需要多个口罩适用于控制可能想要探索这inputmask plugin。

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

Here is a fiddle演示前面的语句：

$(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' />

来源

2013-11-22 21:12:24 Kevin

我必须添加通过jsfiddle共享的整个粘贴吗？ –

@KhanShahrukh这是做到这一点的一种方式。我刚刚更新了包含用于输入掩码的CDN片段的答案。你应该拥有你需要的一切。 – Kevin

我知道这个答案的过时。 @Roop Kumar在下面给出了更好的答案。 –

这是非常有益的，我只是添加一些代码，使其工作时，用户可以删除一些文字，我给进入的选项只有数字和最大长度。这对我的作品:)

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

来源

2015-10-29 13:51:23

这应该是最好的答案。 – Rivers

谢谢你。河流 –

当你试图抹去你写下的东西时，这并不奏效。 – Feek

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

这将肯定:)

来源

2016-05-06 07:09:56

我希望我可以upvote这100次。最佳解决方案 –

我尝试了一些非插件的答案，但他们不幸得了不良的副作用时，工作编辑电话号码。这里是我结束了创建简单且没有特殊的外部第三方的lib依赖的解决方案：

不需要任何插件 - >只是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); 
});

来源

2017-02-16 00:32:02 nikolaosinlight

输入类型文本到输入类型的电话号码。最大长度，使用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">

来源

2017-07-11 12:09:05

为什么2 [answer]（https://stackoverflow.com/a/45034485/4753489）s？ –

上面的jQuery容易在页面中维护 –

-1

窗口底部到使用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>

来源

2017-07-11 12:21:02

在你的情况

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

与jasny bootstrap插件

Demo in fiddle

来源

2018-01-23 06:34:01 Orlando