Question

我希望用户的输入自动填写电话号码的标点符号，如下所示（xxx）xxx-xxxx。我写了一个示例jfiddle here，但在填写电话号码的最后4位数时会中断。

$("#phone").on("change keyup paste", function () {
    var output;
    var input = $("#phone").val();
    input = input.replace(/[^0-9]/g, '');
    var area = input.substr(0, 3);
    var pre = input.substr(3, 4);
    var tel = input.substr(6, 4);
    if (area.length < 3) {
        output = "(" + area;
    } else if (area.length == 3 && pre.length < 3) {
        output = "(" + area + ")" + " " + pre;
    } else if (area.length == 3 && pre.length == 3) {
        output = "(" + area + ")" + " " + pre + "-" + tel;
    }
    $("#phone").val(output);
});

HTMl:
<input id='phone'></input>

Answer 1

我意识到这篇文章比较老，但我发现它非常有用，并进行了一些小修改，以便为所有电话字段增强它，并允许在用户犯错时删除字符。

$("input[type='tel']").each(function(){
  $(this).on("change keyup paste", function (e) {
    var output,
      $this = $(this),
      input = $this.val();

    if(e.keyCode != 8) {
      input = input.replace(/[^0-9]/g, '');
      var area = input.substr(0, 3);
      var pre = input.substr(3, 3);
      var tel = input.substr(6, 4);
      if (area.length < 3) {
        output = "(" + area;
      } else if (area.length == 3 && pre.length < 3) {
        output = "(" + area + ")" + " " + pre;
      } else if (area.length == 3 && pre.length == 3) {
        output = "(" + area + ")" + " " + pre + "-" + tel;
      }
      $this.val(output);
    }
  });
});

<input type="tel" placeholder="(XXX) XXX-XXXX" />

Answer 2

当您从该号码中获取预编码时，您尝试获取4的索引，而不是4位数。所以改变它，它应该开始工作：

var pre = input.substr(3, 3);

如果您不想要动态填充，其他发布的答案可能会有用。

Answer 3

正则表达式是你的朋友。

var ok = phNum.search(/^\(?\d{3}\D*\d{3}\D*\d{4}$/);
if (ok==0) {
  var parts = phNum.match(/^\(?(\d{3})\D*(\d{3})\D*(\d{4})$/);
  output.value='('+parts[1]+') '+parts[2]+'-'+parts[3];
}

接受：404-555-1234,4045551234，（404）555-1234等返回：（404）555-1234

Answer 4

如果您开始使用正则表达式，为什么不进行全面检查。在过滤输入值并将其转换为您的外观的代码下方。

请注意，此代码仅适用于仅包含数字的值。您可以通过插件或自己的代码阻止任何其他类型。（jquery.numeric plugin是个不错的选择）

<强> jquery的

$(document).on('change', '.js-phone-number', function() {
  var
    $this = $(this),
    number = $this.val();

  number = number.replace(/(\d{3})(\d{3})(\d{4})/, '($1)-$2-$3');
  $this.val(number);
});

Answer 5

你正在获取变量pre作为长度为4的子字符串，然后检查它是否小于或等于3.所以，基本上你的最后一个if if block永远不会为真。

更改var pre = input.substr(3,3);

您的代码可以正常使用。

自动填充括号和连字符，用于输入电话号码jquery

5 个答案: