基于jquery的bankInput银行卡账号格式化


Posted in Javascript onAugust 22, 2012

jquery bankInput插件是银行卡进行格式化显示,能控制文本框输入最小最大个数、控制只能输入数字、控制不能粘贴不能使用输入法。同时插件能实现自动加载格式化显示和支持非输入框的格式话显示。

基于jquery的bankInput银行卡账号格式化

<script type="text/javascript" src="__JS__/jquery.bankInput.js"></script> 
<script>$(".account").bankInput()$(".account").bankList() 
</script>

1.默认使用方法:
$("#account").bankInput();
2.设置参数
$("#account").bankInput({min:16,max:25,deimiter,' '});
3.非文本框格式化显示
$(".account").bankList();
/** 
× JQUERY 模拟淘宝控件银行帐号输入 
* @Author 312854458@qq.com 旭日升 
**/ 
(function($){ 
// 输入框格式化 
$.fn.bankInput = function(options){ 
var defaults = { 
min : 10, // 最少输入字数 
max : 25, // 最多输入字数 
deimiter : ' ', // 账号分隔符 
onlyNumber : true, // 只能输入数字 
copy : true // 允许复制 
}; 
var opts = $.extend({}, defaults, options); 
var obj = $(this); 
obj.css({imeMode:'Disabled',borderWidth:'1px',color:'#000',fontFamly:'Times New Roman'}).attr('maxlength', opts.max); 
if(obj.val() != '') obj.val( obj.val().replace(/\s/g,'').replace(/(\d{4})(?=\d)/g,"$1"+opts.deimiter) ); 
obj.bind('keyup',function(event){ 
if(opts.onlyNumber){ 
if(!(event.keyCode>=48 && event.keyCode<=57)){ 
this.value=this.value.replace(/\D/g,''); 
} 
} 
this.value = this.value.replace(/\s/g,'').replace(/(\d{4})(?=\d)/g,"$1"+opts.deimiter); 
}).bind('dragenter',function(){ 
return false; 
}).bind('onpaste',function(){ 
return !clipboardData.getData('text').match(/\D/); 
}).bind('blur',function(){ 
this.value = this.value.replace(/\s/g,'').replace(/(\d{4})(?=\d)/g,"$1"+opts.deimiter); 
if(this.value.length < opts.min){ 
alertMsg.warn('最少输入'+opts.min+'位账号信息!'); 
obj.focus(); 
} 
}) 
} 
// 列表显示格式化 
$.fn.bankList = function(options){ 
var defaults = { 
deimiter : ' ' // 分隔符 
}; 
var opts = $.extend({}, defaults, options); 
return this.each(function(){ 
$(this).text($(this).text().replace(/\s/g,'').replace(/(\d{4})(?=\d)/g,"$1"+opts.deimiter)); 
}) 
} 
})(jQuery);
Javascript 相关文章推荐
一个刚完成的layout(拖动流畅,不受iframe影响)
Aug 17 Javascript
直接生成打开窗口代码,不必下载
May 14 Javascript
ASP中进行HTML数据及JS数据编码函数
Nov 11 Javascript
也说JavaScript中String类的replace函数
Sep 22 Javascript
为EasyUI的Tab标签添加右键菜单的方法
Jul 14 Javascript
使用jquery解析XML的方法
Sep 05 Javascript
node.js中的fs.fchownSync方法使用说明
Dec 16 Javascript
javascript显示中文日期的方法
Jun 18 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
Sep 05 Javascript
jquery判断iPhone、Android设备类型
Sep 14 Javascript
Vee-Validate的使用方法详解
Sep 22 Javascript
微信小程序表单验证WxValidate的使用
Nov 27 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
Aug 22 #Javascript
js选取多个或单个元素的实现代码(用class)
Aug 22 #Javascript
javascript动态加载三
Aug 22 #Javascript
javascript动态加载二
Aug 22 #Javascript
javascript动态加载实现方法一
Aug 22 #Javascript
原生js写的放大镜效果
Aug 22 #Javascript
window.open不被拦截的实现代码
Aug 22 #Javascript
You might like
使javascript也能包含文件
2006/10/26 Javascript
jquery 元素相对定位代码
2010/10/15 Javascript
js 数组去重的四种实用方法
2014/09/09 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
使用jquery.form.js实现图片上传的方法
2016/05/05 Javascript
json传值以及ajax接收详解
2016/05/24 Javascript
利用Angularjs和Bootstrap前端开发案例实战
2016/08/27 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
2016/09/04 Javascript
js模拟微博发布消息
2017/02/23 Javascript
ztree简介_动力节点Java学院整理
2017/07/19 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
vue+elementui 对话框取消 表单验证重置示例
2019/10/29 Javascript
JS 事件机制完整示例分析
2020/01/15 Javascript
微信小程序仿通讯录功能
2020/04/09 Javascript
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
Python虚拟环境Virtualenv使用教程
2015/05/18 Python
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
python的socket编程入门
2018/01/29 Python
python 按不同维度求和,最值,均值的实例
2018/06/28 Python
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
python中hasattr()、getattr()、setattr()函数的使用
2019/08/16 Python
python对Excel的读取的示例代码
2020/02/14 Python
python烟花效果的代码实例
2020/02/25 Python
Python简单实现词云图代码及步骤解析
2020/06/04 Python
Python提取视频中图片的示例(按帧、按秒)
2020/10/22 Python
Python 多进程、多线程效率对比
2020/11/19 Python
美国内衣品牌:Leonisa
2016/08/14 全球购物
船餐厅和泰晤士河餐饮游轮:Bateaux London
2018/03/19 全球购物
高二英语教学反思
2014/01/19 职场文书
大学考试作弊检讨书
2014/01/30 职场文书
班级课外活动总结
2014/07/09 职场文书
党员承诺书格式范文
2015/04/28 职场文书
开天辟地观后感
2015/06/09 职场文书
Django cookie和session的应用场景及如何使用
2021/04/29 Python
python中使用redis用法详解
2022/12/24 Redis