遮罩输入插件jquery.maskedinput.js学习
2018-03-29 09:32
423 查看
第一、初识
遮罩输入插件是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>
相关文章推荐
- jQuery输入格式控制插件Masked Input Plugin
- jQuery输入格式控制插件Masked Input Plugin
- js与jquery实时监听输入框值的oninput与onpropertychange方法
- js与jquery实时监听输入框值的oninput与onpropertychange方法
- js与jquery实时监听输入框值的oninput与onpropertychange方法
- jQuery 版本viewer.js插件的结构分析与学习
- 实现输入内容提示的功能(仿google_百度输入框提示)jquery.ui.autocomplete.js插件
- 自定义输入的select插件jquery.autocomplete.js
- jquery插件--在input下输入密码时提示大写锁定键
- js/jquery 实时监听输入框值变化的完美方案:oninput & onpropertychange
- 【jQuery插件】jquery.onlypressnum.js 文本框只能输入数字插件
- js jquery 限制input输入框只能输入两位小数的数字
- 学习使用jquery iScroll.js移动端滚动条插件
- js与jquery实时监听输入框值的oninput与onpropertychange方法
- JS原生ajax与Jquery插件ajax深入学习
- JQuery插件之Masked Input
- js/jquery 实时监听输入框值变化的完美方案:oninput & onpropertychange
- input联想输入 jquery.autocomplete.js
- 兼容IE8以下浏览器input表单属性placeholder不能智能提示功能,以及使用jquery.validate.js表单验证插件的问题处理
- 快速学习jQuery插件 jquery.validate.js表单验证插件使用方法