如何让jquery.inputmask与input type=number一起使用？

Question

只要输入类型为text，我已经使用了这个插件让代码正常工作，但我想使用type=number，这样在移动设备上会显示正确的键盘。

有没有办法做到这一点，希望能够通过文档中我错过的某些设置来实现？

以下是我的HTML：

<input id="Price" name="Price" type="number" placeholder="0.00" tabindex="3"/>

以下是我的 js 代码：

$(document).ready(function(){
    $('#Price').inputmask("[9][9]9.99", {
        numericInput: true,
        "placeholder": "0",
        showMaskOnHover: false,
        greedy: false
    });
});

- Nathaniel

---

如果插件涉及读取或设置光标位置、选择/插入文本等操作，由于Chrome所做的更改，您肯定会遇到问题。请参见此问题：https://dev59.com/wmEh5IYBdhLWcg3wdjTt - scunliffe

@scunliffe 感谢您指引我正确的方向。我现在会将输入更改为文本，并等待看看 Chrome 是否解决了光标位置问题。 - Nathaniel

Answer 1

The jQuery Inputmask插件(http://plugins.jquery.com/jquery.inputmask/)使用setSelectionRange，selectionStart，selectionEnd(在https://github.com/RobinHerbots/jquery.inputmask/blob/3.x/js/jquery.inputmask-multi.js中)。当Chrome更新以符合W3C更改时，这些属性/方法已被删除在<input type="number"/>字段中in Chrome。

如果您认为W3C更改删除数字字段上的这些功能是错误的，请投票支持Bugzilla bug #24796。

有一些技巧可以解决这个问题，或者您可能需要使用<input type="text">

- scunliffe

---

输入掩码插件在任何浏览器中似乎都不支持数字输入。我已经在最新的FF、IE、Opera和Chrome中测试了我的代码，但只有当类型设置为文本时才有效。其他浏览器在数字字段上是否有相同的功能？ - Nathaniel

Answer 2

我发现使用<input type="tel" />可以在手机上输入数字，并且允许所有与type="text"相同的事件触发！没有支持这些类型的浏览器将回退到使用“text”类型。 http://www.caniuse.com/#search=tel希望这对其他人有所帮助。

- Sean Kendle

Answer 3

我的解决方案是在input type="text"中添加pattern="[0-9]*"，如果这样不起作用，则使用input type="tel"——这允许在手机上输入数字。

- Радислав Ялилов