1

我有一个 html5 数字输入：<input type="number" />

我希望它接受分数和混合数字，例如 38 1/2 以及整数和小数。

我解析分数服务器端。

目前，当输入失去焦点时，浏览器会将输入更改为 38。

当前的解决方法是使用纯文本输入，但我希望type="number"在移动设备上使用特定键盘等好处。

4

2 回答 2

5

该<input type="number">元素被定义为创建一个依赖于浏览器的、依赖于浏览器区域设置的输入控件，用于输入数字。没有办法在您的文档中更改它，除非您可以使用属性来指定范围和精度。所以浏览器可以接受 38 1/2 并在内部将其转换为 38.5，但没有办法说它应该，更不用说强迫它这样做了。此外，数字的内部格式（传递给服务器）是严格定义的；例如，它不能是 38 1/2。

所以你需要使用纯文本输入或一些特殊的小部件（用 JavaScript 编程）。您可以使用该pattern属性以某种方式指定允许的格式，至少是允许的字符集；这可能会或可能不会影响触摸设备上显示的屏幕键盘（对于当前设备，它可能不会）。

于 2013-01-19T06:46:52.307 回答
2

我们最近遇到了同样的问题。

我们的目标是...

  1. 允许用户在所有设备上输入分数、小数和整数
  2. 在移动设备上显示数字键盘

如果我们简单地使用type='number'，大多数桌面浏览器会阻止我们输入斜线字符。在移动版 Safari 中，我们可以输入斜线（例如 2/3），但浏览器会将值转换为空字符串，因为它不是严格的数字。

我们的解决方案是暂时将输入类型更改number为我们想要显示数字键盘的设备。

我们的解决方案如下所示：

var elmInput = document.getElementById("elmID");
if (/(iPad|iPhone|iPod|Android)/g.test(navigator.userAgent)) {
    elmInput.setAttribute("type", "number");
    elmInput.focus();    // brings up numeric keyboard
    setTimeout(function () {elmInput.setAttribute("type", "text"); }, 200);
}

我们已经在多个 iOS 设备上进行了测试，并且我们看到了预期的行为。显然，该解决方案仅限于这些设备。此外，万一用户在不到 200 毫秒的时间内提交表单，他将遇到前面提到的空字符串问题。

我们的情况显然是独一无二的，因为我们只处理一个可以触发焦点的元素。然而，类似的方法可以通过使用 CSS 类选择器来工作。您可以将number移动设备的类型设置为，然后text在聚焦时更改回。

于 2015-01-30T22:36:53.067 回答