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
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)