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