插入字符以作为电话号码输入答案

【问题标题】：Inserting character to input as phone number插入字符以作为电话号码输入
【发布时间】：2019-06-05 18:16:19
【问题描述】：

如何修复此代码以仅在 3 个第一个数字之后应用 -，所以输出看起来像

778-2299

不是778-229-9，您可以看到代码是在每 3 位数字后添加 -

$('.phonenumber').keyup(function() {
  var foo = $(this).val().split("-").join(""); // remove hyphens
  if (foo.length > 0) {
    foo = foo.match(new RegExp('.{1,3}', 'g')).join("-");
  }
  $(this).val(foo);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="phonenumber" maxlength="8"/>

【问题讨论】：

Regular Expression to reformat a US phone number in Javascript的可能重复
过度使用正则表达式...只需检查长度是否为3并添加破折号
我建议使用输入掩码组件。那里有无数。
@MonaCoder：请记住，此处有关重复的建议是真诚提供的，并且很有帮助。不建议使用不友好或敌对的信息进行报复 - 您假设其他帖子不是重复的可能是不正确的。我已将您的信息标记为不友好，以鼓励文明和专业的语气。此标志不会立即产生后果，但请不要收集太多。

标签： javascript jquery

【解决方案1】：

你可以使用：

.replace(regexp|substr, newSubstr|function): ...方法返回一个新字符串，其中模式的部分或全部匹配被替换替换。

$('.phonenumber').keyup(function() {
  var foo = $(this).val().split("-").join(""); // remove hyphens
  if (foo.length > 0) {
    foo = foo.replace(/(\d{3})(\d*)/, '$1-$2');
  }
  $(this).val(foo);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" class="phonenumber" maxlength="8"/>

【讨论】：

【解决方案2】：

不要使用g 标志？这意味着“全局搜索匹配模式”，但你只希望它匹配第一个，所以你不想要那个标志。

【讨论】：

【解决方案3】：

我不确定为什么需要正则表达式。只需使用好旧的substring。

^{我还将它更改为使用input 事件，因为它在触发时更加一致（在更新value 之后）}

$('.phonenumber').on('input', function() {
  var foo = $(this).val().split("-").join(""); // remove hyphens
  if (foo.length === 7) {
    foo = `${foo.substring(0,3)}-${foo.substring(3)}`;
    // or if you're kickin it old skool:
    // foo = foo.substring(0,3) + "-" + foo.substring(3);
  }
  $(this).val(foo);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="phonenumber" maxlength="8"/>

【讨论】：