【jQuery插件】Masked Input Plugin实现文本框掩码效果

 

经常使用的最熟悉的子网掩码就是提供一个固定的格式，你只能按对应的格式输入相应的IP数值，使用jQuery插件Masked Input Plugin可以实现一个类似掩码的功能，可以应用于具有特殊格式的文本表单框中，如日期（2009-05-17）、电话号码[phone]）等，使用Masked Input Plugin不仅可以指定格式，还可以进行表单输入控制，如数字，字母等，效果图如下：

在线查看Masked Input Plugin演示
http://www.biuuu.com/demo/mask/index.html

使用说明
需要使用jQuery库文件和Masked Input Plugin库文件

 

下载jquery.maskedinput-1.2.2.js

使用实例
一，包含文件部分

 

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>

<script src="jquery.maskedinput-1.2.2.js" type="text/javascript"></script>

 

二，HTML部分

<ul> <li>日 期：<input type="text" id="date"/>99/99/9999</li> <li>电话号码：<input type="text" id="phone"/>(9999) 9999-9999</li> <li>出生年月：<input type="text" id="birthday"/>9999年99月99日</li> </ul> 

主要是表单文本框元素，注意给每个表单指定一个ID

三，javascript部分

jQuery(document).ready(function(){ jQuery("#date").mask("99/99/9999"); jQuery("#phone").mask("(9999) 9999-9999"); jQuery("#birthday").mask("9999年99月99日");

这部分主要是给每个指定的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['~']='[+-]'; $("#eyescript").mask("~9.99 ~9.99 999"); 

使用Masked Input Plugin实现文本框掩码效果可以增强用户体验，按指定的格式进行文本输入，值得推荐。

点我查看Masked Input Plugin文档说明
http://digitalbush.com/projects/masked-input-plugin/

点我下载Masked Input Plugin演示源代码
http://jquerycodes.googlecode.com/files/Masked_Input_Plugin.rar

点我查看Masked Input Plugin在线演示
http://www.biuuu.com/demo/mask/index.html