JavaScript regex 中的 type=number 和 type=text 有什么区别？答案

【问题标题】：What is difference between type=number and type=text in JavaScript regex?JavaScript regex 中的 type=number 和 type=text 有什么区别？
【发布时间】：2016-03-24 06:07:02
【问题描述】：

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

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

我的问题是：

从正则表达式的角度来看，两种类型之间是否存在差异？

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

附言。对不起，糟糕的语言。

现在代码：

$(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>

【问题讨论】：

“type=number”如何不实时过滤？
value没有区别，都是字符串类型，当你在JS中读取一个值时。
为什么有嵌套的事件附件？ oninput 处理程序中有 addEventListener('keydown',..)。那肯定会给你带来麻烦。顺便提一句。不同之处在于，如果输入类型的数字包含非数字值，则在oninput 或onchange 等处理程序中，该值将被读取为空字符串。此外，看起来onchange 在这种情况下只会触发一次。
这就是重点。 Soo .. 我能解决这个问题吗？我真的需要“type=number”，脚本的其余部分对我也很重要（特别是过滤，如第一篇文章中所述）。
我嵌套事件，因为我必须计算字符串长度（实时计算，而不是通过输入返回），而且我有 ctrl shift 和特殊键的问题。

标签： javascript regex types filtering phone-number

【解决方案1】：

根据W3 input type="number" specification，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"。

【讨论】：