Knockout.js 验证因 type="number" 输入字段而失败

Question

我有一个包含此输入字段的表单：

 <input type="number" name="price" data-bind="price">

还有这个淘汰赛验证定义：

 ...
 price = ko.observable().extend({required: true, number: true})
 ...

问题在于，当我输入一个非数值时，浏览器实际上将type="number" 字段的值设置为一个空字符串（内部），因此模型接收到一个空字符串。因此，即使用户在字段中看到一个值，淘汰验证机制也会始终触发“必需”验证。最好触发“请输入数字”消息而不是“此字段为必填项”消息。

我当然可以使用type="text"，但这会在移动设备上触发错误的键盘。任何想法如何解决这个问题？

这当然与这个问题有关：HTML5 input type=number value is empty in Webkit if has spaces or non-numeric characters?，但不幸的是，使用 type="tel" 对我来说不是一个选项。

Answer 1

这很尴尬，因为正如this 问题的答案所揭示的那样，浏览器不会公开 HTML5 数字输入的“原始”文本值，并在无效和 null 的情况下返回一个空字符串作为元素值输入。因此，您无法可靠地区分非数字值和缺失值 - 这最终是您的错误消息所需要的。

您甚至无法嗅探按键并查看用户是否以这种方式输入了无效字符，因为您不知道用户是否复制/粘贴了无效内容。

过去，我编写了自定义绑定，用于创建文本输入并将其强制转换为数字，但正如您所承认的，这些会有一些限制，例如调出错误的移动键盘。

令人失望，但我想不出解决这个问题的办法。