jQuery val拒绝从数字字段返回非数字输入（在Chrome中）

刚刚偶然发现了jQuery中的奇怪事情，同时编写了一些验证代码 - 我有一个html5“number”字段;jQuery val拒绝从数字字段返回非数字输入（在Chrome中）

<input type="number" class="required numeric" />

然后，我的脚本将查看页面上的每个字段，检查这些类并根据需要进行验证。我奇怪地注意到，如果我在我的一个数字字段中输入'X'，我会得到一个“请在此字段中输入值”错误，而不是“这应该是数字”错误。经过一些头部划伤和大量调试之后，我敲了一个jsFiddle来演示我的理论 - 看起来如果你在一个数字字段中输入一个字符，然后尝试从jquery中做一个.val（），它将不会返回任何东西 - 就像字段是空的（我在Chrome浏览器中遇到过这种情况 - 不知道它是否在所有浏览器中都能像这样工作）;

http://jsfiddle.net/shawson/SE46L/3/

这里的fiddle-输入一些数字，然后几个字母看crazyness。任何人都知道这是否是设计，如果是这样的话......为什么？

来源

2013-05-07 Shawson

工作在Firefox，必须铬具体，我猜Safari浏览器也因为它呈现“数字”属性相同。 – 2013-05-07 13:58:07

这是多么令人讨厌 - 是的，只是尝试IE10，并与它正常工作！ – Shawson 2013-05-07 14:00:50

这不是一个jQuery问题 - 元素本身为非数字输入返回一个空字符串。 – Alnitak 2013-05-07 14:03:33

这不是一个jQuery问题。如果使用本地element.value（例如getElementByID（'something'）。value），则会得到相同的结果。 Chrome处理输入类型=数字的方式很奇怪，您可以选择使用type = text和pattern属性来解决它。

查看this older question了解更多背景。

来源

2013-05-07 14:01:09 explunit

是的好喊 - 我刚刚把他们移动到“文字“字段。 – Shawson 2013-05-07 14:02:03

这有一个不幸的下降，A）上下箭头轻松输入小整数消失，B）在移动显示器（平板电脑，智能手机）上，键盘不会自动显示数字，而是完整的abc键盘。 – user1884155 2014-03-26 16:55:07

“quirk”是规范：https：//www.w3.org/TR/html5/forms.html#number-state-(type=number）：“如果元素的值不是有效的浮点数，点编号，然后将其设置为空字符串“。如果你得到一个空字符串并且想要无效值：暂时将输入类型改为“text”，再次检索该值，将其转换回type =“number” – 2016-04-18 20:22:28

在Chrome浏览器遇到同样的问题，当它们是非数字时，不会给出类型=数字的值。我投入的工作是简单地将价值设定为其本身的价值。这样它就不会让你首先输入非数字值。这是一个黑客，但它的工作。

如：

$('body').find('input[type="number"]').each(function(k,v) { 

    $(this).on('keyup blur', function() { 
     $(this).val($(this).val()); 
    }); 

});

来源

2014-05-02 00:39:34 user3594630

实际上放弃了数字类型的平均时间Firefox的问题在输入框丢失焦点。 – user3594630 2014-05-18 23:51:42

使用此解决方案，用户不能连续键入数字的开头，因为它会不断移动插入符号到结尾。 – Pang 2014-05-28 06:34:56

jQuery val拒绝从数字字段返回非数字输入（在Chrome中）

回答

相关问题