如何在输入时更改电话号码格式？ [英] How to change Phone number format in input as you type?

问题描述

我的CodePen ：
<
$ b $ ul

我的问题是，在手机需要10位数或
的情况下，应该使用屏蔽输入格式。

然而，当电话号码长于10位时，
格式化应该被移除。

---

以下是我目前的： CodePen ，手机是输入我试图完成这个领域。工作电话是掩码输入插件的默认功能的示例。

如何解决这个问题？
$ b 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）{
 $ b $ if（this.value.trim（）。length> 10）{
 console.log （'this.value ='+ this.value.trim（））; 
 console.log（'greater then 10'）; 
 $（'。added_mobilephone'）。mask（'99999999999999999999'） ; 
 
 $ b $ * if（this.value.length <9）{
 console.log（this.value）; 
 console.log（' [phone]？9999999999'）; 
} else if（this.value.length> 9）{（'。added_mobilephone'）。 
 console.log（this.value）; 
 console.log（'greater then 10'）; 
 $（'。added_mobilephone'）。mask（'99999999999999999999'）; 
} * / 
}）; 
 break; 
  

解决方案

您可能已经解决了这个问题，值得注意的是将来的参考，其他人需要应用多个掩码的控制可能要探索这个 inputmask插件。

它有更多的回调，设置和许多现成的遮罩类型（一定要看看扩展文件）。你也可以为一个控件定义多个掩码，插件会根据这个值设置合适的掩码。

这里是一个小提琴来演示前面的语句：

$（window）.load（function （）{var phones = [{mask：（###）### - ####}，{mask：（###）### - ###### 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 =文本框 />

My CodePen: http://codepen.io/leongaban/pen/cyaAL

I have an input field for a phone number which allows up to 20 characters (for international numbers).

I'm also using the Masked input jQuery plugin by Josh Bush to format the phone number in the input to make it 'pretty'.

• My problem is that in the requirements when the phone is 10 digits or less, it should use the Masked input formatting.

• However when the phone number is longer then 10 digits, the formatting should be removed.

---

Here is my current: CodePen, Cell Phone is the input field where I'm trying to accomplish this. Work Phone is an example of the default functionality of the Mask input plugin.

How would you go about this problem?

jQuery for Cell Phone input field:

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('less then 10');
        $('.added_mobilephone').mask('[phone]? 9999999999');
      } else if (this.value.length > 9) {
        console.log(this.value);
        console.log('greater then 10');
        $('.added_mobilephone').mask('99999999999999999999');
      }*/
    });
    break;

解决方案

You've probably already solved this problem, but it's worth noting for future reference that anyone else with the need to apply multiple masks to a control may want to explore this inputmask plugin.

It has more callbacks, settings and many out of the box mask types(be sure to take a look at the extension files). You can also define multiple masks for a control, and the plugin will try and apply the appropriate mask based on the value.

Here is a fiddle to demo the previous statement:

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

这篇关于如何在输入时更改电话号码格式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！