基于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 相关文章推荐
js onpropertychange输入框 事件获取属性
Mar 26 Javascript
!DOCTYPE声明对JavaScript的影响分析
Apr 12 Javascript
jquery读取xml文件实现省市县三级联动的方法
May 29 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 Javascript
js调用webservice构造SOAP进行身份验证
Apr 27 Javascript
Node.js的npm包管理器基础使用教程
May 26 Javascript
JavaScript必看小技巧(必看)
Jun 07 Javascript
JS实现微信里判断页面是否被分享成功的方法
Jun 06 Javascript
Vue2.0结合webuploader实现文件分片上传功能
Mar 09 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
Sep 18 Javascript
ES6 更易于继承的类语法的使用
Feb 11 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 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打造属于自己的MVC框架
2012/03/07 PHP
Symfony2学习笔记之模板用法详解
2016/03/17 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
浅谈PHP array_search 和 in_array 函数效率问题
2019/10/15 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
JS实现拖动示例代码
2013/11/01 Javascript
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
AspNet中使用JQuery上传插件Uploadify详解
2015/05/20 Javascript
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
2016/04/05 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
2017/10/30 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
vue按需加载组件webpack require.ensure的方法
2017/12/13 Javascript
JavaScript原生实现观察者模式的示例
2017/12/15 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
js实现聊天对话框
2020/02/08 Javascript
Python random模块常用方法
2014/11/03 Python
python运行时间的几种方法
2016/06/17 Python
[原创]Python入门教程5. 字典基本操作【定义、运算、常用函数】
2018/11/01 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
通过python3实现投票功能代码实例
2019/09/26 Python
python用requests实现http请求代码实例
2019/10/31 Python
python中time库的实例使用方法
2019/10/31 Python
代码总结Python2 和 Python3 字符串的区别
2020/01/28 Python
Python如何存储数据到json文件
2020/03/09 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
keras得到每层的系数方式
2020/06/15 Python
培训讲师邀请函
2014/01/10 职场文书
会计专业个人自我鉴定
2014/03/21 职场文书
迎国庆演讲稿
2014/09/05 职场文书
与死神共舞观后感
2015/06/15 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
mongoDB数据库索引快速入门指南
2022/03/23 MongoDB