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

问题描述

我的 CodePen:

• 我的问题是在电话是10位数或者less，它应该使用 Masked 输入格式.

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

<小时>

这是我当前的:CodePen，手机是我的输入字段我试图做到这一点.工作电话是 掩码输入插件 的默认功能示例.

你会如何解决这个问题?

手机输入框的jQuery:

案例'2':console.log('创建的电话输入');$('.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('大于 10');$('. added_mobilephone').mask('99999999999999999999');}/*if (this.value.length < 9) {控制台.log(this.value);console.log('小于 10');$('. added_mobilephone').mask('[phone]?9999999999');} else if (this.value.length > 9) {控制台.log(this.value);console.log('大于 10');$('. added_mobilephone').mask('99999999999999999999');}*/});休息;

解决方案

你可能已经解决了这个问题，但值得注意的是，其他任何需要对控件应用多个掩码的人可能想要探索以供将来参考这个 inputmask 插件.

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

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

$(window).load(function(){var 电话 = [{ "mask": "(###) ###-####"}, { "mask": "(###) ###-##############"}];$('#textbox').inputmask({面具:手机，贪婪:虚假，定义:{'#':{验证器:[0-9]"，基数:1}}})；});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></脚本><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屋！