Masked Input这个jQuery插件让用户能够按照预先设定好的固定格式输入数据(如日期、电话号码等)。
官方网站: http://digitalbush.com/projects/masked-input-plugin/
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">中~位置只能输入+或-。
使用说明
需要使用jQuery库文件和Masked Input Plugin库文件
使用实例
一,包含文件部分
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
二,HTML部分
<ul>
主要是表单文本框元素,注意给每个表单指定一个ID
三,javascript部分
<script type="text/javascript">
这部分主要是给每个指定的ID文本框一个格式,可自定义任意格式。实例可知,只需要指定文本框和掩码格式。
输入限制,分别如下
a - 表示只能输入(A-Z,a-z)范围内的值
9 - 表示只能输入(0-9)范围内的值
* - 表示只能输入(A-Z,a-z,0-9)范围内的值
同时还可以指定掩码显示效果,实例可知输入的部分下面有一条下划的虚线,使用如下方法可切换。
$("#product").mask("99/99/9999",{placeholder:" "});
将掩码显示格式_ _换为" "
还可以指定触发事件,如下:
$("#product").mask("99/99/9999",{completed:function(){alert("You typed the following: "+this.val());}});
支持自定义掩码设置,如下:
$.mask.definitions['~']='[+-]';
使用Masked Input Plugin实现文本框掩码效果可以增强用户体验,按指定的格式进行文本输入,值得推荐。
- 大小: 44.8 KB
分享到:
相关推荐
jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件
jquery 插件jquery 插件jquery 插件jquery 插件
jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....
jquery.samask-masker是一款input限制输入格式jQuery插件。该jquery插件可以在用户往输入框输入内容时,限制输入内容的格式,例如电话号码格式,日期格式,货币格式和ip地址格式等等。
jquery多值输入插件 jquery多级菜单导航 jquery大转盘game jquery实现网易邮箱首页插件 jquery导航,缓慢弹出下拉效果 jquery左侧导航滑动网页定位效果 jquery左侧弹出二级菜单 jquery弹出层 jquery弹出层 三种弹出...
jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件
组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件...
JQuery简单插件示意,介绍插件的基本写法格式
JQuery插件的写法 最常用的jquery插件开发方式(教程合集) jquery插件的例子 jQuery插件开发教程_看这一本就行了 JQuery插件写法 jq插件最常用的写法
jQuery键盘插件网页虚拟键盘输入代码 jQuery键盘插件网页虚拟键盘输入代码
jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery...
Ddreamweaver jquery 插件 Ddreamweaver jquery 插件Ddreamweaver jquery 插件 Ddreamweaver jquery 插件 Ddreamweaver jquery 插件 Ddreamweaver jquery 插件 Ddreamweaver jquery 插件
flash-jquery插件 flash-jquery插件 flash-jquery插件 flash-jquery插件
非常好用的清除html格式的jquery插件,使用起来也比较方便,可以看下源代码学习下。
Jquery数字输入插件,淘宝商品数量输入插件、
jquery插件.rar
推荐10款jQuery插件.zip jQuery标签插件 jQuery表单插件 jQuery File Upload-jQuery上传插件 jquery.barrager.js专业的网页弹幕插件 jquery定时器 jQuery记录历史搜索框 jQuery密码强度提示插件 jquery实现宽度...
jQuery-Validation-Engine-master 表单验证插件 简单好用,已经包含汉化
sublime2 jquery插件 快捷键:Ctrl + Shift + P,然后输入jQuery,哈哈支持jquery语法高亮显示喽!
jQuery打印插件jqprint,jquery.jqprint-0.3.js 下载,内包含使用示例,下载解压可直接在浏览器打开使用。 jQuery打印插件jqprint,jquery.jqprint-0.3.js 下载,内包含使用示例,下载解压可直接在浏览器打开使用。 ...