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

问题描述

我的 CodePen:

• 我的问题是当手机是10位数字或少，它应该使用掩码输入格式.

• 但是当电话号码超过 10 位时，应该删除格式.

<小时>

这是我当前的:CodePen，手机是我的输入字段我正在努力实现这一目标.工作电话是屏蔽输入插件的默认功能示例.

你会如何解决这个问题?

手机输入框的jQuery:

case '2':console.log('创建电话输入');$('.new_option').append(myphone);$('. added_mobilephone').mask('[phone]? 9');$('. added_mobilephone').keypress(function(event){如果 (this.value.trim().length > 10) {console.log('this.value = '+this.value.trim());console.log('大于 10');$('. added_mobilephone').mask('99999999999999999999');}/*if (this.value.length <9) {控制台日志(this.value)；console.log('小于 10');$('. added_mobilephone').mask('[phone]? 9999999999');} else if (this.value.length > 9) {控制台日志(this.value)；console.log('大于 10');$('. added_mobilephone').mask('99999999999999999999');}*/});休息;

解决方案

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

它有更多的回调、设置和许多开箱即用的掩码类型(一定要看看扩展文件).您还可以为一个控件定义多个掩码，插件将尝试根据值应用适当的掩码.

这里有一个小提琴来演示前面的语句:

$(window).load(function(){var phone = [{ "mask": "(###) ###-####"}, { "mask": "(###) ###-##############"}];$('#textbox').inputmask({面具:电话，贪婪:错误，定义:{'#':{验证器:[0-9]"，基数: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'/>

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屋！