在自动完成电话号码中添加破折号

Posted 2023-05-09

【中文标题】在自动完成电话号码中添加破折号

【英文标题】：Add dash in auto complete phone number

【发布时间】：2015-09-29 21:29:13

【问题描述】：

问题：

是否可以在自动补全中自动添加破折号“-”？

假设我有一个电话号码字段，如果有人在其中输入他们的电话号码，浏览器自动完成将显示。

例如。

这是浏览器自动完成值 1234567890

一旦他们选择我想自动将其格式化为这个

123-456-7890

因为有些网站在他们的电话字段中没有验证格式，您可以连续输入 10 位数字，一旦您在浏览器缓存中输入，它也会显示到其他电话字段中。

提前致谢。

【问题讨论】：

见this answer我写的..有两个例子。不需要 jQuery。

【参考方案1】：

$('#phone-number-field').keyup(function()
    $(this).val($(this).val().replace(/(\d3)\-?(\d3)\-?(\d4)/,'$1-$2-$3'))
);

【参考方案2】：

你可以试试这个代码。

$(function () 

    $('#txtnumber').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 == 8 || key == 9 || key == 46 || (key >= 48 && key <= 57) || (key >= 96 && key <= 105));
   )
);

html 输入

<input id="txtnumber"   type="text" maxlength="12" placeholder="xxx-xxx-xxxx" />

在jsfiddle中也可以看到

https://jsfiddle.net/karthikjsf/38vdpj4f/

【参考方案3】：

上面的答案很好，但是我在复制粘贴时遇到了一些问题，即输入其他字符而不是数字，所以我使用了：

  $('#help_number').keyup(function()
    $(this).val($(this).val().match(/\d+/g).join("").replace(/(\d3)\-?(\d3)\-?(\d4)/,'$1-$2-$3'))
  );

例子：

str="34%^gd 5-67 6-6ds897"

str.match(/\d+/g).join("")

输出为：>>“3456766897”

str.match(/\d+/g).join("").replace(/(\d3)\-?(\d3)\-?(\d4)/,'$1-$2-$3')

输出是：345-676-6897

【讨论】：

除非他们先输入一个或多个非数字会发生什么？