如何使 jquery.inputmask 与输入类型 = 数字一起使用？

Posted 2023-05-08

【中文标题】如何使 jquery.inputmask 与输入类型 = 数字一起使用？

【英文标题】：How to make jquery.inputmask work with input type=number?

【发布时间】：2014-09-16 16:28:07

【问题描述】：

只要输入 type=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
    );
);

【问题讨论】：

如果插件在读取或设置光标位置或选择/插入文本方面做了任何事情，由于他们所做的更改，您肯定会在 Chrome 上遇到问题。看到这个问题：***.com/questions/22381837/…

@scunliffe 感谢您为我指明了正确的方向。我现在将输入更改为文本，并等待查看光标位置问题是否在 chrome 中得到解决。

【参考方案1】：

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 中）。这些属性/方法在更新以符合 W3C 更改时，已在 <input type="number"/> 字段 in Chrome 中删除。

如果您认为 W3C 对数字字段移除这些功能的更改是错误的，请投票给Bugzilla bug #24796

有some hacks 可以解决此问题，或者您可能需要使用<input type="text">

【讨论】：

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

【参考方案2】：

我发现使用<input type="tel" /> 允许在手机上输入数字，并且还允许触发与type="text" 相同的所有事件！

不支持这些类型的浏览器将退回到使用 “文本”类型。

http://www.caniuse.com/#search=tel

希望这对其他人有所帮助。

【参考方案3】：

我的解决方案是将 pattern="[0-9]*" 添加到 input type="text"，或者如果它不起作用，请使用 input type="tel" - 允许在手机上输入数字