允许在HTML5数字输入中使用特殊字符/分数_Html

允许在HTML5数字输入中使用特殊字符/分数

html

允许在HTML5数字输入中使用特殊字符/分数,html,Html,我有一个html5数字输入：我希望它能接受分数和混合数，比如38 1/2，以及整数和小数我在服务器端解析分数当前，当输入失去焦点时，浏览器会将输入更改为38 当前的解决方法是使用纯文本输入，但我希望使用type=“number”的好处，例如移动设备上的特定键盘。定义元素以创建与浏览器相关的、与浏览器区域设置相关的输入控件，用于输入数字。除了可以使用属性指定范围和精度之外，无法在文档中更改这一点。因此，浏览器可以接受38 1/2，并在内部将其转换为38.5，但没有办法说它应该这样做，更不用说

我有一个html5数字输入：

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

我在服务器端解析分数

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

当前的解决方法是使用纯文本输入，但我希望使用

type=“number”

的好处，例如移动设备上的特定键盘。

定义

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

因此，您需要使用纯文本输入或一些特殊的小部件（用JavaScript编程）。您可以使用

模式

属性以某种方式指定允许的格式，至少指定允许的字符集；这可能会也可能不会影响触摸设备上显示的屏幕键盘（对于当前设备，可能不会）。

定义

因此，您需要使用纯文本输入或一些特殊的小部件（用JavaScript编程）。您可以使用

模式

属性以某种方式指定允许的格式，至少指定允许的字符集；这可能会也可能不会影响触摸设备上显示的屏幕键盘（对于当前设备，可能不会）。

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

我们的目标是

允许用户在所有设备上输入分数、小数和整数

在移动设备上显示数字键盘

如果我们只使用

type='number'

，大多数桌面浏览器都会阻止我们输入斜杠字符。在mobile 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类选择器也可以使用类似的方法。对于移动设备，您可以将type设置为

number

，然后在关注时返回到

text

。

我们最近遇到了相同的问题