在某些 Android 设备/Chrome 上的 HTML5 数字输入中没有小数位

Posted 2023-05-06

【中文标题】在某些 Android 设备/Chrome 上的 HTML5 数字输入中没有小数位

【英文标题】：No decimal place in HTML5 number input on some Android devices / Chrome

【发布时间】：2013-12-11 17:36:34

【问题描述】：

在某些 android 设备上，创建 html5 数字输入字段不会显示任何小数位。

<input type="number" step="0.001" min="0" name="foo" />

这很麻烦，因为我正在尝试编写 HTML5 + javascript 应用程序。它目前适用于 ios 以及一些（大多数？）Android 设备。只是有些安卓版本/品牌在弹出的数字键盘上不显示小数位。

例如在 Galaxy S3 上，该应用程序本身运行良好，但如果在 Chrome 中打开相同的代码，您将没有小数点。我正在使用这个组合来测试并尝试解决这个错误。

问题来了 - 有没有办法使用 Javascript 来检测键盘不会显示小数点？在这种情况下，我可以以编程方式将 number 类型更改为 text，但我只想对需要的设备执行此操作。

（或者，有没有办法强制小数点出现在键盘上？到目前为止，我的研究表明没有，这就是为什么我要询问解决方法。）

我尝试使用各种步骤（any、0.1 等）、设置模式、将起始值设置为小数 (value="0.1")，但均无济于事。

我已经尝试检测浏览器可以处理数字字段，但这报告为“真”...设备可以处理数字字段，他们只是处理它们糟糕：

var i = document.createElement("input");
i.setAttribute("type", "number");
i.setAttribute("step", "0.001");
alert(i.type + ' and ' + i.step); // gives "number and 0.001", so the device has stored the values and claims to support them

我不确定接下来要尝试什么...来自社区的任何想法？

【问题讨论】：

参见***.com/questions/12514162/… 并阅读 cmets。是不是同一个问题？

我严重怀疑这会有所不同，但你不需要使用.setAttribute() 来表示“type”和“step”之类的东西；它们是可在 DOM 节点上直接访问的属性（因为您的 alert() 已编码），因此您只需编写 i.type = "number"; 等即可。

@epascarello 我读过那个帖子，但是（a）这是关于应用程序（不是 Chrome 本身）和（b）那里没有发布答案。那个帖子也是一年多前写的，所以从那以后可能会有新的东西。

@pointy - 我知道，只是建议使用这种方法来测试浏览器对各种功能的支持，所以我按原样使用它，以防setAttribute() 位是测试的一部分。

【参考方案1】：

尝试将min 标签设置为0.0 而不是0

<input type="number" step="0.001" min="0.0" name="foo" />