基于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 相关文章推荐
EXTjs4.0的store的findRecord的BUG演示代码
Jun 08 Javascript
浅析Javascript匿名函数与自执行函数
Feb 06 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
Jun 24 Javascript
微信小程序 富文本转文本实例详解
Oct 24 Javascript
input框中的name和id的区别
Nov 16 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
Dec 02 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
Dec 14 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
深入剖析Node.js cluster模块
May 23 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
Mar 30 Javascript
JS数组方法shift()、unshift()用法实例分析
Jan 18 Javascript
React配置子路由的实现
Jun 03 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中根据某年第几天计算出日期年月日的代码
2011/02/24 PHP
php判断数组中是否存在指定键(key)的方法
2015/03/17 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
ThinkPHP 在阿里云上的nginx.config配置实例详解
2017/10/11 PHP
PHP的PDO连接讲解
2019/01/24 PHP
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
2012/03/01 Javascript
javascript 实现简单的table排序及table操作练习
2012/12/28 Javascript
javascript中声明函数的方法及调用函数的返回值
2014/07/22 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
纯javascript版日历控件
2016/11/24 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
Vue自定义指令详解
2017/07/28 Javascript
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
webpack4.x打包过程详解
2018/07/18 Javascript
qrcode生成二维码微信长按无法识别问题的解决
2019/04/04 Javascript
vue中引入mxGraph的步骤详解
2019/05/17 Javascript
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
Python2.x中文乱码问题解决方法
2015/06/02 Python
详解python3实现的web端json通信协议
2016/12/29 Python
Python操作SQLite数据库的方法详解
2017/06/16 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
对python字典过滤条件的实例详解
2019/01/22 Python
python使用celery实现异步任务执行的例子
2019/08/28 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
一款纯css3实现的tab选项卡的实列教程
2014/12/11 HTML / CSS
英国最大的宠物商店:Pets at Home
2019/04/17 全球购物
javascript实现用户必须勾选协议实例讲解
2021/03/24 Javascript
活动策划邀请函
2014/02/06 职场文书
会计毕业生自荐书
2014/06/12 职场文书
金融专业毕业生自荐信
2014/06/26 职场文书
美容院合作经营协议书
2014/10/10 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书
Java使用httpRequest+Jsoup爬取红蓝球号码
2021/07/02 Java/Android
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL