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

Question

我的CodePen: http ://codepen.io/leongaban/pen/cyaAL

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

我还使用了屏蔽输入jQuery插件,由乔希·布什的格式输入电话号码,使其"漂亮".

• 我的问题是,在电话是10位或更少的要求时,它应该使用Masked输入格式.

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

---

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

你会怎么解决这个问题？

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;

Answer 1

$("input[name='phone']").keyup(function() {
    $(this).val($(this).val().replace(/^(\d{3})(\d{3})(\d)+$/, "($1)$2-$3"));
});

这肯定会起作用:)

Answer 2

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

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

这是演示前一个声明的小提琴:

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

Answer 3

这非常有用,我只添加了一些代码,以便在用户删除某些字符时使用它,我只选择输入数字和最大长度.这对我有用:)

$(document).ready(function(){
  /***phone number format***/
  $(".phone-format").keypress(function (e) {
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
      return false;
    }
    var curchr = this.value.length;
    var curval = $(this).val();
    if (curchr == 3 && curval.indexOf("(") <= -1) {
      $(this).val("(" + curval + ")" + "-");
    } else if (curchr == 4 && curval.indexOf("(") > -1) {
      $(this).val(curval + ")-");
    } else if (curchr == 5 && curval.indexOf(")") > -1) {
      $(this).val(curval + "-");
    } else if (curchr == 9) {
      $(this).val(curval + "-");
      $(this).attr('maxlength', '14');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="phone-format"  type="text" placeholder="Phone Number">

Answer 4

在你的情况下

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>

<input type="text" class="form-control" data-mask="(999) 999-9999">

使用jasny bootstrap插件