基于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 相关文章推荐
学习ExtJS form布局
Oct 08 Javascript
基于jquery的让页面控件不可用的实现代码
Apr 27 Javascript
jQueryUI的Dialog的简单封装
Jun 07 Javascript
IE下js调试工具Companion.JS
Oct 15 Javascript
php中给js数组赋值方法
Mar 10 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 Javascript
使用bootstrap实现多窗口和拖动效果
Sep 22 Javascript
ES6新特性八:async函数用法实例详解
Apr 21 Javascript
AngularJs点击状态值改变背景色的实例
Dec 18 Javascript
vue中使用element组件时事件想要传递其他参数的问题
Sep 18 Javascript
ES6中的Javascript解构的实现
Oct 30 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 表单提交及处理表单数据详解及实例
2016/12/27 PHP
PHP+JQUERY操作JSON实例
2017/03/23 PHP
网上抓的一个特效
2007/05/11 Javascript
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
有趣的javascript数组定义方法
2010/09/10 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
Vue之Watcher源码解析(2)
2017/07/19 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
2020/04/03 Javascript
Python中join和split用法实例
2015/04/14 Python
Python的Django中django-userena组件的简单使用教程
2015/05/30 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
python实现简易版计算器
2020/06/22 Python
对python字典元素的添加与修改方法详解
2018/07/06 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
Django CBV与FBV原理及实例详解
2019/08/12 Python
python面向对象 反射原理解析
2019/08/12 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
Python实现队列的方法示例小结【数组,链表】
2020/02/22 Python
文件上传服务器-jupyter 中python解压及压缩方式
2020/04/22 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
高级护理专业毕业生推荐信
2013/12/25 职场文书
2014年法院个人工作总结
2014/12/17 职场文书
2015年打非治违工作总结
2015/04/02 职场文书
预备党员转正党小组意见
2015/06/01 职场文书
运动员入场前导词
2015/07/20 职场文书
优秀大学生申请书
2019/06/24 职场文书
Python读取文件夹下的所有文件实例代码
2021/04/02 Python
自定义函数实现单词排序并运用于PostgreSQL(实现代码)
2021/04/22 PostgreSQL
JavaScript中isPrototypeOf函数
2021/11/07 Javascript
面试中老生常谈的MySQL问答集锦夯实基础
2022/03/13 MySQL