基于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 Event学习第六章 事件的访问
Feb 07 Javascript
jQuery 表格插件整理
Apr 27 Javascript
Node.js开发指南中的简单实例(mysql版)
Sep 17 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
Oct 31 Javascript
手机端页面rem宽度自适应脚本
May 20 Javascript
在JavaScript中使用开平方根的sqrt()方法
Jun 15 Javascript
javascript中的后退和刷新实现方法
Nov 10 Javascript
HTML5 js实现拖拉上传文件功能
Nov 20 Javascript
vue使用vue-cli快速创建工程
Jul 28 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
Mar 07 Javascript
一个因@click.stop引发的bug的解决
Jan 08 Javascript
JavaScript实现动态留言板
Mar 16 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 采集书并合成txt格式的实现代码
2009/03/01 PHP
PHP开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
php判断访问IP的方法
2015/06/19 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
Javascript 面向对象 继承
2010/05/13 Javascript
JavaScript 程序编码规范
2010/11/23 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
2011/06/28 Javascript
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
jquery 日期控件datepicker属性详细解析
2013/11/08 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
nodeJS代码实现计算交社保是否合适
2015/03/09 NodeJs
跟我学习javascript的循环
2015/11/18 Javascript
简单实现IONIC购物车功能
2017/01/10 Javascript
AngularJS学习第二篇 AngularJS依赖注入
2017/02/13 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
2017/06/29 Javascript
详解Vue中一种简易路由传参办法
2017/09/15 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
2018/11/14 Javascript
js实现多个倒计时并行 js拼团倒计时
2019/02/25 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
2019/03/21 Javascript
Vue Autocomplete 自动完成功能简单示例
2019/05/25 Javascript
javascript实现摄像头拍照预览
2019/09/30 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
python查找第k小元素代码分享
2013/12/18 Python
python使用Tesseract库识别验证
2018/03/21 Python
对pandas中两种数据类型Series和DataFrame的区别详解
2018/11/12 Python
python三大神器之fabric使用教程
2019/06/10 Python
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
The North Face北面德国官网:美国著名户外品牌
2018/12/12 全球购物
美国购买韩国护肤和美容产品网站:Althea Korea
2020/11/16 全球购物
关于迟到的检讨书
2014/01/26 职场文书
2014五一国际劳动节活动总结范文
2014/04/14 职场文书
2014年保洁员工作总结
2014/11/19 职场文书
教导处教学工作总结
2015/08/12 职场文书
java基础——多线程
2021/07/03 Java/Android
python神经网络学习 使用Keras进行回归运算
2022/05/04 Python