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

前端之家收集整理的这篇文章主要介绍了jquery – 如何在输入时更改输入中的电话号码格式?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我的CodePen: http://codepen.io/leongaban/pen/cyaAL

我有一个电话号码的输入字段,最多允许20个字符(国际号码).

我也使用Masked input jQuery pluginJosh Bush来格式化输入中的电话号码以使其“漂亮”.

>我的问题是,在电话是10位数或
少,它应该使用Masked输入格式.
>但是当电话号码长于10位时,
删除格式.

这是我的当前:CodePen,手机是输入字段,我正在努力实现这一目标. Work Phone是Mask input plugin默认功能的一个示例.

你会怎么解决这个问题?

jQuery for Cell Phone输入字段:

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;

解决方法

你可能已经解决了这个问题,但是值得注意的是,未来的参考是否需要向控件应用多个掩码的其他人可能想要探索这个 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' />

猜你在找的jQuery相关文章