范围 0-100 使用 jQuery inputmask 插件

Posted 2023-05-08

【中文标题】范围 0-100 使用 jQuery inputmask 插件

【英文标题】：Range 0-100 using jQuery inputmask plugin

【发布时间】：2014-12-26 07:18:47

【问题描述】：

如何为 0 到 100 的范围创建掩码？

$(document).ready(function() 
    $("#masked").inputmask(???);
);

【参考方案1】：

您可以为此使用jquery.inputmask.regex.extensions.js。您可以找到所有扩展名为 on this link 的原始 js。关于正则表达式扩展（以及所有其他扩展）的 github 部分可以在 jquery.inputmask#regex-extensions 上找到。

当您包含该扩展时，您可以简单地使用以下正则表达式：

^[1-9][0-9]?$|^100$

这匹配 1 或 2 位数字和数字 100。

然后你只需像往常一样将它传递给 inputmask 插件：

html

Test: <input type="text" id="example1">

javascript

$(document).ready(function()
    $("#example1").inputmask('Regex',  regex: "^[1-9][0-9]?$|^100$" );
);

这是一个 jsFiddle 来证明它的工作原理：

> SEE DEMO

---

编辑 1

我刚刚看到你想匹配 0-100 而不是我在上面所做的 1-100。

要匹配0-100，只需将"^[1-9][0-9]?$|^100$" 更改为"^[0-9][0-9]?$|^100$"

我将 "^[1-9][0-9]?$|^100$" 中的 1 更改为 0强>。更正后的jsFiddle可以在here找到。

---

编辑 2

从January 14, 2015 开始，现在也可以使用numeric extension。有了这个扩展，您现在可以简单地对整数范围执行以下操作：

$("#example1").inputmask('integer',min:1, max:100);

对于十进制数：

$("#example1").inputmask('decimal',min:1, max:100);

见demo。

---

编辑 3

截至 2016 年 9 月，语法已更改：

$("#example1").inputmask("numeric", 
  min: 0,
  max: 100
);

见NEW DEMO

请注意，它现在仅在输入数字并且用户单击输入框外的某个位置之后才起作用。

【讨论】：

有什么方法可以在“整数”别名中实现范围而不是正则表达式？喜欢.inputmask('integer',minValue:1, maxValue:100？ （只是好奇。）

是的，最近已经实现了。回到提问的时候，这个功能还不存在，但是they have implemented it now。

我尝试时 jFiddle 不工作。它会抛出一个 JS 错误 TypeError: Inputmask is not a constructor

@Adam 显然inputmask 的较新版本与我的代码不向后兼容。我将 jsFiddles 中的 js 依赖项更改为使用旧的 inputmask 插件（版本 3.1.57）。这样做，一切都会再次按预期工作。要将代码与最新的 inputmask 库一起使用，您可能只需要在语法上进行一些小改动。祝你好运:)

带有正则表达式的更好，因为其他人允许将负数或超过 100 个磁带，然后在失去焦点时纠正它们，而不是像正则表达式那样在磁带上。

【参考方案2】：

嗯，我正在寻找一种解决方案，将我的字段中介于 0.00 和 100.00 之间的所有值与 jQuery.inputmask 匹配。

我看到了要求用户为插件添加外部库的公认答案，我设法想出了一个内置的解决方案。

就这样吧。

<input type="text" data-inputmask data-inputmask-mask="(99)|(100)" name="field"/>

或者，使用 jQuery

jQuery(function($) 
    $('input').inputmask("(99)|(100)");
);

按以下方式渲染

【参考方案3】：

你可以用简单的 html 来做这个！！ http://www.w3schools.com/tags/att_input_min.asp http://www.w3schools.com/tags/att_input_max.asp

【讨论】：

或使用 jquery validate 插件

【参考方案4】：

基于inputmask plugin hompage：

$(selector).inputmask("99-9999999");

【讨论】：

破折号是字面意思，不是范围指示符。