Question

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

我有一个电话号码的输入字段，最多允许20个字符（国际号码）。

我还使用Masked input jQuery plugin Josh 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;

Answer 1

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

这肯定会有效：）

Answer 2

您可能已经解决了这个问题，但值得注意的是，未来需要向控件应用多个蒙版的其他人可能想要探索此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' />

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插件

Answer 5

我尝试了一些非插件的答案，但不幸的是，在编辑电话号码时，它们会产生不良副作用。这是一个解决方案，我最终创建它很简单，没有特殊的外部第三方lib依赖：

不需要任何插件 - ＆gt;只是JS和JQuery
自动过滤掉非数字（即噪音）
在删除数字
维护格式/删除时不会中断
如果没有任何改变，则什么也不做允许光标向左/向右移动以与其他使光标挂钩的解决方案进行更改

CAVEAT：考虑的电话号码只是北美，我的情况很好，因为这被用于加拿大的当地社区足球注册。

$("input[name='phone_num']").keyup(function() {
  var val_old = $(this).val();
  var val = val_old.replace(/\D/g, '');
  var len = val.length;
  if (len >= 1)
    val = '(' + val.substring(0);
  if (len >= 3)
    val = val.substring(0, 4) + ') ' + val.substring(4);
  if (len >= 6)
    val = val.substring(0, 9) + '-' + val.substring(9);
  if (val != val_old)
    $(this).focus().val('').val(val);
});

Answer 6

检查以下答案。

我是为TSP代码创建的（我的项目之一），但是类似的结构适用于电话号码。解决方案相当简单。
我在下面的解决方案中使用KeyCode。有关密钥代码的更多信息，请参见here。

 $(function () {
    $('#txtphonenumber').keydown(function (e) {
    var key = e.charCode || e.keyCode || 0;
    $text = $(this); 
       if (key !== 8 && key !== 9) {
          if ($text.val().length === 3) {
             $text.val($text.val() + '-');
          }
          if ($text.val().length === 7) {
             $text.val($text.val() + '-');
          }
       }
       return ((key >= 48 && key <= 57) || (key >= 96 && key <= 105) || key == 46 || key == 8 || key == 9 );
      // KeyCode from 48 to 57 are the Numeric characters
      // KeyCode from 96 to 105 are the numpad 0 to numpad 9
      // KeyCode delete 46
      // KeyCode backspace 8
      // KeyCode tab 9
  })
});

Answer 7

这是我的解决方案（适用于美国号码），当您键入时可以使用

const maskPhoneNumber = (s) => {
  let o = '';
  o += s.length >= 3 ? `(${s.substring(0, 3)}` : s;
  o += s.length >= 4 ? `) ${s.substring(3, 6)}` : s.substring(3);
  o += s.length >= 7 ? `-${s.substring(6)}` : '';
  return o;
};

Answer 8

输入类型文本到输入类型的电话号码。 max-length，占位符使用jquery。

＆＃13;

// Used to format phone number and add placeholder and max-length
function phoneFormatter() {
 $(' input[type="text"]').attr({ placeholder : '(___) ___-____' });
  $('input[tabindex="111"]').on('input', function() {
    var number = $(this).val().replace(/[^\d]/g, '')
    if (number.length == 7) {
      number = number.replace(/(\d{3})(\d{4})/, "$1-$2");
    } else if (number.length == 10) {
      number = number.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");
     
    }
    $(this).val(number)
    $('input[type="text"]').attr({ maxLength : 10 });
    
  });
};

$(phoneFormatter);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="input_111[]" value="" tabindex="111">

＆＃13;

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

8 个答案: