基于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 相关文章推荐
JavaScript CSS修改学习第一章 查找位置
Feb 19 Javascript
Javascript拓展String方法小结
Jul 08 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 Javascript
js实现滑动触屏事件监听的方法
May 05 Javascript
Jquery鼠标放上去显示全名的实现方法
Feb 06 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 Javascript
EasyUI创建人员树的实例代码
Sep 15 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
Aug 10 Javascript
浅谈发布订阅模式与观察者模式
Apr 09 Javascript
世界上最短的数字判断js代码
Sep 09 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
PHP安装全攻略:APACHE
2006/10/09 PHP
对淘宝URL中ID提取的PHP代码
2013/09/01 PHP
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
php日志函数error_log用法实例分析
2019/09/23 PHP
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
js函数调用常用方法详解
2012/12/03 Javascript
jquery图片放大功能简单实现
2013/08/01 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
Node.js Addons翻译(C/C++扩展)
2016/06/12 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
jQuery ajax请求struts action实现异步刷新
2017/04/19 jQuery
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
2018/05/14 Javascript
JS实现获取word文档内容并输出显示到html页面示例
2018/06/23 Javascript
javascript实现日历效果
2019/06/17 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
[56:41]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs OG
2018/04/01 DOTA
使用Kivy将python程序打包为apk文件
2017/07/29 Python
Python中的取模运算方法
2018/11/10 Python
python实现QQ批量登录功能
2019/06/19 Python
python线程中的同步问题及解决方法
2019/08/29 Python
python多线程同步之文件读写控制
2021/02/25 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
CSS3制作hover下划线动画
2017/03/27 HTML / CSS
德国低价购买灯具和家具网站:Style-home.de
2016/11/25 全球购物
中国双语服务优势的在线购票及活动平台:247tickets
2018/10/26 全球购物
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
简历中自我评价范文3则
2013/12/14 职场文书
出售房屋协议书范本
2014/10/06 职场文书
2016优秀大学生个人事迹材料范文
2016/03/01 职场文书
创业计划书之情侣餐厅
2019/09/29 职场文书
python 多态 协议 鸭子类型详解
2021/11/27 Python
Golang入门之计时器
2022/05/04 Golang
python神经网络ResNet50模型
2022/05/06 Python