遮罩输入插件jquery.maskedinput.js学习

最新推荐文章于 2024-08-23 09:02:44 发布

陈袁

最新推荐文章于 2024-08-23 09:02:44 发布

阅读量2.4k

点赞数

分类专栏：技术工具前端框架

本文链接：https://blog.csdn.net/achenyuan/article/details/79737445

版权

技术工具同时被 2 个专栏收录

77 篇文章 4 订阅

订阅专栏

前端框架

28 篇文章 0 订阅

订阅专栏

第一、初识

遮罩输入插件是jqueryoverviewthis的一个遮罩的输入jQuery插件库。它允许用户更容易进入固定宽度输入你所希望的以一定的格式输入数据（日期，电话号码，等）。它已在Internet Explorer，Firefox，Safari，Opera和Chrome等浏览器上测试过。遮罩的定义是由一个格式由遮罩的文字和掩码定义。任何字符不在定义列表下面的被认为是遮罩文字。遮罩文字会自动进入使用者的类型，不能被用户删除。以下是预先定义的掩码定义：

a代表一个字符（A-Z，a-z）

9代表一个数字字符（0-9）

*代表一个字母（A-Z，a-z，0-9）

源码下载地址,效果展示

第二、语法

1.直接使用mask方法

mask(param1,pararm2)：param1:限制输入格式，param2:制定占位符或回调completed

mask方法param2默认有2个参数。placeholder：默认点位符“下划线”，completed：回调函数。以对象形势传入mask方法。
例如：

$(".class或#id").mask("99/99/9999",{completed:function(){alert("completed!");}});

表示只能输入”99/99/9999”这种格式并且输入完成触发completed指定的回调函数。

2.自定义掩码
如果觉得9 a *不够用，可以自定义语法如下：

$.mask.definitions['~'] = "[+-]";//表示只能输入+—符
或
$.mask.definitions['z']='[123]';表示只能输入123数字

3.删除遮罩

umask():删除输入格式的限制

第三、应用场景

我个人觉得应用场景不多，因为它限制了输入的数据长度，比如金额，可能由0-100000，插件不能动态指定数据长度，导致只能指定输入的位数。

电话号码，邮政编码可以用，因为长度固定。
所以，个人感觉，数据除非长度固定，不然没大用。

第四、完整例子

<html>
<head>
<title> jQuery Mask Test </title>
<script src="../lib/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../dist/jquery.maskedinput.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        $.mask.definitions['~'] = "[+-]";
        $("#date").mask("99/99/9999",{completed:function(){alert("completed!");}});
        //$("#date").caret(2,6);
        $("#phone").mask("(999) 999-9999");
        $("#phoneExt").mask("(999) 999-9999? x99999");
        $("#iphone").mask("+33 999 999 999");
        $("#tin").mask("99-9999999");
        $("#ssn").mask("999-99-9999");
        $("#product").mask("a*-999-a999", { placeholder: " " });
        $("#eyescript").mask("~9.99 ~9.99 999");
        $("#po").mask("PO: aaa-999-***");
        $("#pct").mask("99.99%");

        $("input").blur(function() {
            $("#info").html("Unmasked value: " + $(this).mask());
        }).dblclick(function() {
            $(this).unmask();
        });
    });

</script>
</head>
<body>
<table>
        <tr><td>Date</td><td><input id="date" value="1231" type="text" tabindex="1" /></td><td>99/99/9999</td></tr>
        <tr><td>Phone</td><td><input id="phone" type="text" tabindex="2"/></td><td>(999) 999-9999</td></tr>
        <tr><td>Phone + Ext</td><td><input id="phoneExt" type="text" tabindex="2"/></td><td>(999) 999-9999? x99999</td></tr>
        <tr><td>Int'l Phone</td><td><input id="iphone" type="text" tabindex="2"/></td><td>+33 999 999 999</td></tr>
        <tr><td>Tax ID</td><td><input id="tin" type="text" tabindex="3"/></td><td>99-9999999</td></tr>
        <tr><td>SSN</td><td><input id="ssn" type="text" tabindex="4"/></td><td>999-99-9999</td></tr>
        <tr><td>Product Key</td><td><input id="product" type="text" tabindex="5"/></td><td>a*-999-a999</td></tr>
        <tr><td>Eye Script</td><td><input id="eyescript" type="text" tabindex="6"/></td><td>~9.99 ~9.99 999</td></tr>
        <tr><td>Purchase Order</td><td><input id="po" type="text" tabindex="6"/></td><td>aaa-999-***</td></tr>
        <tr><td>Percent</td><td><input id="pct" type="text" tabindex="6"/></td><td>99%</td></tr>
</table>
<div id="info"></div>
</body>
</html>