电话号码输入jquery的自动填充括号和连字符答案

【问题标题】：Auto filling parentheses and hyphen for phone number input jquery电话号码输入jquery的自动填充括号和连字符
【发布时间】：2014-11-25 04:37:18
【问题描述】：

我想让用户的输入自动填充电话号码的标点符号，使其看起来像 (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>

【问题讨论】：

我可以使用@Felix 修复，但我注意到，当有人想更改他们的号码时，此代码不允许有人这样做。你如何使它成为一个占位符类型输入，他们可以删除他们的数字并重新输入？

标签： javascript jquery phone-number

【解决方案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);
    }
  });
});

&lt;input type="tel" placeholder="(XXX) XXX-XXXX" /&gt;

【讨论】：

为了允许 (xxx) xxx-xxxx，模式属性的值是多少。早些时候我在检查破折号，所以我的 html 是

【解决方案2】：

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

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

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

【讨论】：

谢谢。当我今天回到它时，我看到了这一点，并因为犯了一个愚蠢的错误而打了自己的头。

【解决方案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

【讨论】：

【解决方案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);
});

【讨论】：

【解决方案5】：

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

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

您的代码可以正常工作。

【讨论】：