Question

我输入了一个html5号码：<input type="number" />

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

我解析了分数服务器端。

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

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

Answer 1

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

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

Answer 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。

允许HTML5数字输入中的特殊字符/分数

2 个答案: