用于电话号码的jQuery输入掩码

我希望用户输入自动填充电话号码的标点符号，以便看起来像这样(xxx) xxx-xxxx 。 这是我的HTML代码：

  
 Phone Number: 
 <input type="text" class="form-control" name="phoneNumber" id="phoneNumber" value=""> 
  

我还需要做些什么才能完成这项任务？ 我正在尝试使用jQuery和输入掩码。

Answer 1

您可以使用Input Mask jQuery扩展来完成此操作。

 $('#phoneNumber').inputmask("(999) 999-999"); 

   Phone Number: 
   

Answer 2

目前，为了检测全球任何类型的电话号码， 电话分机更合适，因为它已经在预先存在的掩码arrays中进行检查（无需定义掩码）：

 let allIns = document.querySelectorAll("input"); Inputmask().mask(allIns); [...allIns].map(el => el.setAttribute('placeholder', "+#(###)-###-####")); $('#jqp input').inputmask("phone", { placeholder: '#', showMaskOnHover: false, onKeyValidation: function () { let mt = $(this).inputmask("getmetadata"); $('#jqp span').text(`${mt['cd']} (${mt['cc']})`); //console.log(mt); } }); Inputmask.extendAliases({ my_phone: { alias: "abstractphone", placeholder: '#', phoneCodes: [{ mask: "+987-####", cc: "zz", cd: "zzzz", desc_en: "Moon!", name_ru: "яяя", desc_ru: "" }, { mask: "+789-###", cc: "yy", cd: "YY", desc_en: "Sun!" }], onKeyValidation: function() { let mt = $(this).inputmask("getmetadata"); $('#jqma span').text(mt['desc_en']).css('color', `#${Math.floor(Math.random() * 0x1000000).toString(16).padStart(6, 0)}`); //console.log(mt); } } }); $('#jqma input').inputmask("my_phone"); 

 span {color:#37e;font-weight:bold} 

       
 Old simple HTML data + JS:   
 
jQuery phone extension alias:   
 
jQuery extended phone alias: