JavaScript正则表达式中type = number和type = text有什么区别？

Question

脚本必须计算3个字符并过滤任何不是数字的内容。 任何3位数后，脚本放置：“ - ”; 然后防止添加超过9位数。

任何工作都很好，而我在输入中使用“type = text”。 当我使用“type = number”（这对我的新任务很重要）时，脚本不起作用(replace(/(.{3})/g,'$1 - ') ，将最后3个字符放入输入[我猜]）。

我的问题是：

这两种类型在正则表达式视角中是否存在差异？

也许“type = number”解析字符串为int？ （但据我所知，纯（没有JS）“type = number”不会实时过滤任何东西）。

PS。 抱歉可怕的语言。

现在代码：

 $(document).ready(function() { var selection = document.querySelector('.correct_phone input[name=phone]'); //selection.setAttribute('type','number'); selection.addEventListener('input', function(e) { selection.addEventListener('keydown', function(b) { if (b.keyCode != 8 && b.keyCode != 46 && b.keyCode != 37 && b.keyCode != 39 && b.keyCode != 16 && b.keyCode != 17 && b.keyCode != 18) { if (e.target.value.length < 14 && e.target.value.length > 0) { $(selection).parent('.correct_phone').find('.error_list.not_digit').remove(); //e.target.value = e.target.value.replace(/[^\\dA-Z]/g, '').replace(/(.{3})/g, '$1 ').trim(); /^\\d+$/ e.target.value = e.target.value.replace(/[^\\d]/g, '').replace(/(.{3})/g, '$1 - ').trim(); } else if (e.target.value.length > 14) { $(selection).parent('.correct_phone').find('.error_list.not_digit').remove(); e.target.value = e.target.value.substring(0, e.target.value.length - 1); $(selection).parent('.correct_phone').css('border-color', 'red').find('label').before("<ul style='margin-bottom:0px;' class='error_list not_digit'><li style=' font-size:1.1em;'>Nuber shuld contains only 9 digits</li></ul>"); $(selection).parent('.correct_phone').find('ul.error_list.not_digit').animate({ opacity: 0 }, 3000, function() { $(this).remove(); }); } } else $(selection).parent('.correct_phone').find('.error_list.not_digit').remove(); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="fieldset semi correct_phone"> <label class="input-name">Phone:</label> <input type="text" name="phone" value="" /> </div> 

Answer 1

根据W3输入类型=“数字”规范 ， type="number"保留用于浮点数 。

具体来说，以下行描述了您遇到的错误：

值清理算法如下 ：如果元素的值不是有效的浮点数，则将其设置为空字符串。

因此，在您的代码中，您将输入的值设置为不是浮点数的值：

e.target.value = e.target.value.replace(/[^\d]/g, '').replace(/(.{3})/g, '$1 - ').trim();

因此-字符被视为错误输入 ，浏览器遵循规范并将值设置为空字符串。

要解决此问题，您应该使用type="tel" ，它接受任何有效的电话号码作为输入：

<input type="tel" name="phone" value="" />

这将现代移动浏览器设置为显示数字键盘布局（如type="number" 。