jQuery插件学习之maskedinput
时间:2009-12-30
来源:互联网
很久不用jq了,以前的东西差不多忘光了,现在在整理一些个人觉得好用的插件。我想把整理的文档都传上来,如果官网的描述很详细的话,我的帖子基本上就是翻译翻译了,所以大家不要拍砖哈,如果大家觉得还有点用的话,我就继续上传的。
1. 介绍
maskedinput是一个对输入框进行格式控制的jq插件。主页为http://digitalbush.com/projects/masked-input-plugin/。
maskedinput有3个通配符:
a - Represents an alpha character (A-Z,a-z)
9 - Represents a numeric character (0-9)
* - Represents an alphanumeric character (A-Z,a-z,0-9)
2. 使用介绍
1) 引入需要的js
<script type="text/javascript" src="../../Core/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.maskedinput-1.2.2.js"></script>
2) 假如有文本框<input id="product" tabindex="7" type="text">,则使用如下代码来控制格式
$("#product").mask("a*-999-a999",{placeholder:" ",completed:function(){alert("You typed the following: "+this.val());}});
其中placeholder和completed为可选项,placehoder是使用指定字符来代替默认的下划线来占位。completed为输入完成后的回调函数。在官方的例子中,completed是不起作用的,检查后发现源码中有如下语句:
if (settings.completed && next == len)
settings.completed.call(input);
但实际上next==len永远都是false,我debug了一下,发现next在输入完成后变成了输入字数+1。比如有4位输入字符,当输入1,2,3位数字后,nex分别是1,2,3,但输入第四位后,next变为了5,导致了条件永远不成立,回调函数自然无法执行。我将条件改为if (settings.completed && (next-1) == len)后成功。
3) 还可以定制自己的mask,使用方法如下:
jQuery(function($){
$.mask.definitions['~']='[+-]';
$("#eyescript").mask("~9.99 ~9.99 999");
});
则<input id="eyescript" tabindex="8" type="text">中~位置只能输入+或-。
1. 介绍
maskedinput是一个对输入框进行格式控制的jq插件。主页为http://digitalbush.com/projects/masked-input-plugin/。
maskedinput有3个通配符:
a - Represents an alpha character (A-Z,a-z)
9 - Represents a numeric character (0-9)
* - Represents an alphanumeric character (A-Z,a-z,0-9)
2. 使用介绍
1) 引入需要的js
<script type="text/javascript" src="../../Core/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.maskedinput-1.2.2.js"></script>
2) 假如有文本框<input id="product" tabindex="7" type="text">,则使用如下代码来控制格式
$("#product").mask("a*-999-a999",{placeholder:" ",completed:function(){alert("You typed the following: "+this.val());}});
其中placeholder和completed为可选项,placehoder是使用指定字符来代替默认的下划线来占位。completed为输入完成后的回调函数。在官方的例子中,completed是不起作用的,检查后发现源码中有如下语句:
if (settings.completed && next == len)
settings.completed.call(input);
但实际上next==len永远都是false,我debug了一下,发现next在输入完成后变成了输入字数+1。比如有4位输入字符,当输入1,2,3位数字后,nex分别是1,2,3,但输入第四位后,next变为了5,导致了条件永远不成立,回调函数自然无法执行。我将条件改为if (settings.completed && (next-1) == len)后成功。
3) 还可以定制自己的mask,使用方法如下:
jQuery(function($){
$.mask.definitions['~']='[+-]';
$("#eyescript").mask("~9.99 ~9.99 999");
});
则<input id="eyescript" tabindex="8" type="text">中~位置只能输入+或-。
作者: chris_strive 发布时间: 2009-12-30
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读:74
-
如何安装mysql8.0
阅读:31
-
Word快速设置标题样式步骤详解
阅读:28
-
20+道必知必会的Vue面试题(附答案解析)
阅读:37
-
HTML如何制作表单
阅读:22
-
百词斩可以改天数吗?当然可以,4个步骤轻松修改天数!
阅读:31
-
ET文件格式和XLS格式文件之间如何转化?
阅读:24
-
react和vue的区别及优缺点是什么
阅读:121
-
支付宝人脸识别如何关闭?
阅读:21
-
腾讯微云怎么修改照片或视频备份路径?
阅读:28