1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 </head> 8 9 <body> 10 <form class="form-horizontal" style="margin-top: 100px;"> 11 <div class="form-group"> 12 <label>PHONE</label> 13 <input type="tel" class="userPhone" onkeyup="this.blur();this.focus();" maxlength="13" id="" placeholder="phone"> 14 </div> 15 </form> 16 17 <script type="text/javascript"> 18 var inputs = document.querySelector('.userPhone'); 19 var oninput = onchange || oninput; 20 inputs.oninput = function() { 21 var str = inputs.value; 22 str = formatNum(str.replace(/D/g, ''), true); 23 inputs.value = str; 24 } 25 26 function formatNum(num, isTel, count) { 27 isTel = isTel || 0; 28 count = count || 4; 29 30 if (isTel) { 31 num = '0' + num; 32 } 33 34 var patt = new RegExp('\d{' + count + '}', 'g') 35 num = num.replace(patt, function($0) { 36 return $0 + ' '; 37 }) 38 39 if (isTel) { 40 num = num.slice(1).trim() 41 } 42 return num; 43 } 44 </script> 45 </body> 46 47 </html>