JQuery插件之Masked Input

Masked Input是一个字符输入格式化的jQuery插件。它可让你轻松的实现对各种数据的输入进行格式限制，如日期、电话等。Masked Input在IE、Firefox、Safari和Chrome通过测试。Mask会自动为用户输入类型占位符且用户将不能删除。以下为占位符的代表意义。

常用的通配符

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

如果预定义的占位符不合适你的要求，你可以进行自定义格式。例如，你需要定义一个只允许十六进制字符的格式，命名为H，你只需这样定 义$.mask.definitions[‘h’] = “[A-Fa-f0-9]”就可以了，这样你就可以限制输入的格式为#hhhhhh。

使用方法

1.引入jquery.js和jquery.maskedinput.js文件，这个插件不包含任何的样式，所以美化表单元素需要你自己编写代码。

<script src="jquery.min.js"</script><script src="jquery.maskedinput.min.js"></script>

2.编写HTML代码，其实就是编写一个文本框

请输入有效手机号：<input id="phone" type="text"/><span id="info"></span>

3.初始化Masked Input插件，调用mask()函数传递格式化参数

<script>$(function (){    $("#phone").mask("999-999-9999");    $("#phone").blur(function() {        $("#info").html("手机号为: " + this.value);    });});</script>

默认文本框是空的，你可以给其设置占位说明

jQuery(function($){  $("#phone").mask("999-999-9999",{placeholder:"1"});});

定义自己的通配符

jQuery(function($){   $.mask.definitions['~']='[+-]';   $("#eyescript").mask("~9.99 ~9.99 999");});

相关链接

GitHub：https://github.com/digitalBush/jquery.maskedinput