html5 输入小数,javascript - 如何处理html5输入类型为numb的浮点数和小数分隔符

javascript - 如何处理html5输入类型为numb的浮点数和小数分隔符

我正在构建主要用于移动浏览器的Web应用程序。 我使用数字类型的输入字段，因此(大多数)移动浏览器仅调用数字键盘以获得更好的用户体验。 这个Web应用程序主要用于小数分隔符是逗号而不是点的区域，所以我需要处理两个小数分隔符。

如何用点和逗号来掩盖这整个烂摊子？

我的发现：

桌面Chrome

输入类型=数字

用户输入“4,55”到输入字段

$("#my_input").val();返回“455”

我无法从输入中获得正确的值

桌面Firefox

输入类型=数字

用户输入“4,55”到输入字段

$("#my_input").val();返回“4,55”

多数民众赞成，我可以用点替换逗号并得到正确的浮点数

Android浏览器

输入类型=数字

用户输入“4,55”到输入字段

当输入失去焦点时，值被截断为“4”

让用户感到困惑

Windows Phone 8

输入类型=数字

用户输入“4,55”到输入字段

$("#my_input").val();返回“4,55”

多数民众赞成，我可以用点替换逗号并得到正确的浮点数

当用户可能使用逗号或点作为小数分隔符并且我想将html输入类型保持为数字时，这种情况下的“最佳实践”是什么，以提供更好的用户体验？

我可以将逗号转换为“动态”点，绑定键事件，它是否与数字输入一起使用？

编辑

Currenlty我没有任何解决方案，如何从输入中获取浮点值(作为字符串或数字)，类型设置为数字。 如果最终用户输入“4,55”，则Chrome返回“455”，Firefox返回“4,55”，这很好。

同样令人讨厌的是，在Android(经过测试的4.2模拟器)中，当我输入“4,55”输入字段并将焦点更改为其他位置时，输入的数字将被截断为“4”。

9个解决方案

98 votes

我认为上面的答案中缺少的是需要为step属性指定一个不同的值，该属性的默认值为1.如果您希望输入的验证算法允许浮点值，请相应地指定一个步骤。

例如，我想要美元金额，所以我指定了这样一个步骤：

pattern="[0-9]+([\.,][0-9]+)?" step="0.01"

title="This should be a number with up to 2 decimal places.">

使用jQuery检索值没有任何问题，但您会发现直接使用DOM API来获取元素的step属性很有用。

我有一个类似的小数点问题，但我意识到存在问题的原因是因为Twitter Bootstrap添加到具有无效值的数字输入的样式。

这是一个小提示，证明添加step属性使其工作，并且还测试当前值是否有效：

的jsfiddle

TL; DR：将step属性设置为浮点值，因为它默认为1。

注意：逗号不会对我进行验证，但我怀疑如果我将我的操作系统语言/区域设置设置为使用逗号作为小数分隔符的某处，它就可以工作。 *注意注意*：在Ubuntu / Gnome 14.04中，操作系统语言/键盘设置*德语*不是这种情况。

natchiketa answered 2019-06-27T00:05:50Z

22 votes

根据w3.org，数字输入的value属性被定义为浮点数。 浮点数的语法似乎只接受点作为十进制分隔符。

我在下面列出了一些可能对您有所帮助的选项：

1.使用pattern属性

使用pattern属性，您可以使用HTML5兼容方式使用正则表达式指定允许的格式。 在这里，您可以指定允许使用逗号字符，并在模式失败时指定有用的反馈消息。

title="The number input must start with a number and use either comma or a dot as a decimal character."/>

注意：跨浏览器支持变化很大。 它可能是完整的，部分的或不存在的..

2. JavaScript验证

您可以尝试将简单回调绑定到例如onchange(和/或blur)事件，该事件将替换逗号或一起验证所有事件。

3.禁用浏览器验证##

第三，您可以尝试在数字输入上使用formnovalidate属性，以便一起禁用该字段的浏览器验证。

4.组合..？

name="my-num" formnovalidate

title="The number input must start with a number and use either comma or a dot as a decimal character."/>

kjetilh answered 2019-06-27T00:07:17Z

7 votes

使用.val()而不是.val()。

输入。 valueAsNumber [= value]

返回表示表单控件值的数字(如果适用); 否则，返回null。

可以设置，更改值。

如果控件既不是基于日期或时间也不是数字，则抛出INVALID_STATE_ERR异常。

Mike Samuel answered 2019-06-27T00:08:09Z

7 votes

是否对小数点分隔符使用逗号或句点完全取决于浏览器。 浏览器根据操作系统或浏览器的区域设置做出决定，或者某些浏览器从网站上获取提示。 我制作了一个浏览器比较图表，显示了不同的浏 Safari是唯一可以互换处理逗号和句点的浏览器。

基本上，作为网络作者，你无法真正控制它。 一些解决方法涉及使用两个带整数的输入字段。 这允许每个用户按照期望输入数据。 它不是特别性感，但它适用于所有用户的每种情况。

Aeyoun answered 2019-06-27T00:08:41Z

3 votes

我还没有找到一个完美的解决方案，但我能做的最好的事情是使用type =“tel”并禁用html5验证(formnovalidate)：

如果用户输入逗号，它将在我尝试的每个现代浏览器中输出逗号(最新的FF，IE，边缘，歌剧，chrome，safari桌面，android chrome)。

主要问题是：

移动用户会看到他们的手机键盘可能不同比数字键盘。

更糟糕的是，手机键盘甚至可能没有逗号键。

对于我的用例，我只需要：

用逗号显示初始值(firefox将其删除类型=数目)

html5验证不会失败(如果有逗号)

将字段完全读作输入(带有可能的逗号)

如果您有类似的要求，这应该适合您。

注意：我不喜欢pattern属性的支持。 formnovalidate似乎工作得更好。

Bolo answered 2019-06-27T00:10:16Z

1 votes

当您致电$("#my_input").val();时，它将返回为字符串变量。 因此，请使用toFixed和parseInt进行转换。当您使用parseFloat桌面或手机时，ITSELF了解变量的含义。

另外，您可以使用toFixed将float转换为字符串，其参数的位数如下：

var i = 0.011;

var ss = i.toFixed(2); //It returns 0.01

answered 2019-06-27T00:10:48Z

1 votes

使用文本类型但强制数字键盘的外观

inputmode标签是解决方案

David Navarro answered 2019-06-27T00:11:21Z

0 votes

我的推荐？ 根本不要使用jQuery。 我遇到了和你一样的问题。 我发现Number()总是会返回一些奇怪的结果。

尝试使用Number()而不是$("#my_input").val();，然后使用Number(your_value_retrieved)尝试创建一个数字。 如果值是NaN，那么你肯定知道这不是一个数字。

要添加的一件事是当你在输入上写一个数字时，输入实际上几乎可以接受任何字符(我可以写欧元符号，一美元和所有其他特殊字符)，所以最好使用它来检索值 Number()而不是使用jQuery。

哦，和BTW，允许您的用户添加国际化(即：支持逗号而不是点来创建十进制数)。 只需让Number()对象为您创建一些东西，它就是十进制安全的，可以这么说。

Patrick D'appollonio answered 2019-06-27T00:12:09Z

0 votes

听起来你想在数字输入上使用toLocaleString()。

有关其用法，请参见[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString]。

JS中的数字本地化也包含在国际化(数字格式“num.toLocaleString()”)中，不适用于chrome

stackasec answered 2019-06-27T00:12:49Z