带有jQuery和Masked Input Plugin的手机屏幕

我有一个问题，用jQuery和Masked Input Plugin屏蔽手机输入。

有两种可能的格式：

1. (XX)XXXX-XXXX
2. (XX)XXXXX-XXXX

有没有办法掩盖它接受这两种情况？

编辑：

我试过了：

 $("#phone").mask("(99) 9999-9999"); $("#telf1").mask("(99) 9999*-9999"); $("#telf1").mask("(99) 9999?-9999"); 

但它并不像我想的那样有效。

最接近的是（xx）x​​xxx-xxxxx。

我输入（xx）x​​xxx-xxxx时输入第10个数字，而（xx）x​​xxxx-xxxx输入第11个数字时。 它可以吗？

Answer 1

试试这个 – http://jsfiddle.net/dKRGE/3/

 $("#phone").mask("(99) 9999?9-9999"); $("#phone").on("blur", function() { var last = $(this).val().substr( $(this).val().indexOf("-") + 1 ); if( last.length == 3 ) { var move = $(this).val().substr( $(this).val().indexOf("-") - 1, 1 ); var lastfour = move + last; var first = $(this).val().substr( 0, 9 ); $(this).val( first + '-' + lastfour ); } }); 

Answer 2

这是一个jQuery电话号码掩码。 不需要插件。 格式可以根据您的需要进行调整。

更新了JSFiddle 。

HTML

JavaScript的

 $('#phone-number', '#example-form') .keydown(function (e) { var key = e.which || e.charCode || e.keyCode || 0; $phone = $(this); // Don't let them remove the starting '(' if ($phone.val().length === 1 && (key === 8 || key === 46)) { $phone.val('('); return false; } // Reset if they highlight and type over first char. else if ($phone.val().charAt(0) !== '(') { $phone.val('('+$phone.val()); } // Auto-format- do not expose the mask as the user begins to type if (key !== 8 && key !== 9) { if ($phone.val().length === 4) { $phone.val($phone.val() + ')'); } if ($phone.val().length === 5) { $phone.val($phone.val() + ' '); } if ($phone.val().length === 9) { $phone.val($phone.val() + '-'); } } // Allow numeric (and tab, backspace, delete) keys only return (key == 8 || key == 9 || key == 46 || (key >= 48 && key <= 57) || (key >= 96 && key <= 105)); }) .bind('focus click', function () { $phone = $(this); if ($phone.val().length === 0) { $phone.val('('); } else { var val = $phone.val(); $phone.val('').val(val); // Ensure cursor remains at the end } }) .blur(function () { $phone = $(this); if ($phone.val() === '(') { $phone.val(''); } }); 

Answer 3

实际上正确的答案是在http://jsfiddle.net/HDakN/

Zoltan答案将允许用户输入“（99）9999”，然后保持字段不完整

 $("#phone").mask("(99) 9999-9999?9"); $("#phone").on("blur", function() { var last = $(this).val().substr( $(this).val().indexOf("-") + 1 ); if( last.length == 5 ) { var move = $(this).val().substr( $(this).val().indexOf("-") + 1, 1 ); var lastfour = last.substr(1,4); var first = $(this).val().substr( 0, 9 ); $(this).val( first + move + '-' + lastfour ); } });​ 

Answer 4

你需要一个面具的jQuery插件。

– HTML –

– JAVASCRIPT –

Answer 5

使用jQuery Mask Plugin有两种可能的方法来实现它：

1-遵循Anatel的建议： https ： //gist.github.com/3724610/5003f97804ea1e62a3182e21c3b0d3ae3b657dd9

2-或者不遵循Anatel的推荐： https ： //gist.github.com/igorescobar/5327820

以上所有示例均使用jQuery Mask Plugin进行编码，可从以下url下载： http ： //igorescobar.github.io/jQuery-Mask-Plugin/

Answer 6

您可以将手机别名与Inputmask v3一起使用

 $('#phone').inputmask({ alias: "phone", "clearIncomplete": true }); 

 $(function() { $('input[type="tel"]').inputmask({ alias: "phone", "clearIncomplete": true }); }); 

 Phone          

Answer 7

 var $phone = $("#input_id"); var maskOptions = {onKeyPress: function(phone) { var masks = ['[phone]', '(00) 00000-0000']; mask = phone.match(/^\([0-9]{2}\) 9/g) ? masks[1] : masks[0]; $phone.mask(mask, this); }}; $phone.mask('[phone]', maskOptions); 

Answer 8

使用jquery.mask.js

http://jsfiddle.net/brynner/f9kd0aes/

HTML

JS

 // Function function phoneMask(e){ var s=e.val(); var s=s.replace(/[_\W]+/g,''); var n=s.length; if(n<11){var m='(00) 0000-00000';}else{var m='(00) 00000-00000';} $(e).mask(m); } // Type $('body').on('keyup','.phone',function(){ phoneMask($(this)); }); // On load $('.phone').keyup(); 

只有jQuery

http://jsfiddle.net/brynner/6vbrqe6z/

HTML

 
85999998888
 
8599998888 

jQuery的

 $('.phone').text(function(i, text) { var n = (text.length)-6; if(n==4){var p=n;}else{var p=5;} var regex = new RegExp('(\\d{2})(\\d{'+p+'})(\\d{4})'); var text = text.replace(regex, "($1) $2-$3"); return text; }); 

Answer 9

执行此操作的最佳方法是使用如下更改事件：

 $("#phone") .mask("(99) 9999?9-9999") .on("change", function() { var last = $(this).val().substr( $(this).val().indexOf("-") + 1 ); if( last.length == 3 ) { var move = $(this).val().substr( $(this).val().indexOf("-") - 1, 1 ); var lastfour = move + last; var first = $(this).val().substr( 0, 9 ); // Change 9 to 8 if you prefer mask without space: (99)9999?9-9999 $(this).val( first + '-' + lastfour ); } }) .change(); // Trigger the event change to adjust the mask when the value comes setted. Useful on edit forms. 

Answer 10

在模糊上执行此操作的最佳方法是：

  function formatPhone(obj) { if (obj.value != "") { var numbers = obj.value.replace(/\D/g, ''), char = {0:'(',3:') ',6:' - '}; obj.value = ''; upto = numbers.length; if(numbers.length < 10) { upto = numbers.length; } else { upto = 10; } for (var i = 0; i < upto; i++) { obj.value += (char[i]||'') + numbers[i]; } } } 

Answer 11

作为替代

  function FormatPhone(tt,e){ //console.log(e.which); var t = $(tt); var v1 = t.val(); var k = e.which; if(k!=8 && v1.length===18){ e.preventDefault(); } var q = String.fromCharCode((96 <= k && k <= 105)? k-48 : k); if (((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) && e.keyCode!=46 && e.keyCode!=37 && e.keyCode!=8 && e.keyCode!=39) { e.preventDefault(); } else{ setTimeout(function(){ var v = t.val(); var l = v.length; //console.log(l); if(k!=8){ if(l<4){ t.val('+7 '); } else if(l===4){ if(isNaN(q)){ t.val('+7 ('); } else{ t.val('+7 ('+q); } } else if(l===7){ t.val(v+')'); } else if(l===9){ t.val(v1+' '+q); } else if(l===13||l===16){ t.val(v1+'-'+q); } else if(l>18){ v=v.substr(0,18); t.val(v); } } else{ if(l<4){ t.val('+7 '); } } },100); } } 

Answer 12

我在输入字段上开发了简单易用的掩码到美国电话格式jquery-input-mask-phone-number

简单将jquery-input-mask-phone-number插件添加到HTML文件中并调用usPhoneFormat方法。

 $(document).ready(function () { $('#yourphone').usPhoneFormat({ format: '(xxx) xxx-xxxx', }); }); 

使用JSFiddle链接https://jsfiddle.net/1kbat1nb/

NPM参考URL https://www.npmjs.com/package/jquery-input-mask-phone-number

GitHub参考URL https://github.com/rajaramtt/jquery-input-mask-phone-number

Answer 13

如果您不想将掩码显示为占位符，则应使用jQuery Mask Plugin 。

最干净的方式：

 var options = { onKeyPress: function(phone, e, field, options) { var masks = ['(00) 0000-00000', '(00) 00000-0000']; var mask = (phone.length>14) ? masks[1] : masks[0]; $('.phone-input').mask(mask, options); } }; $('.phone-input').mask('(00) 0000-00000', options);