基于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 判断判断某个对象是Object还是一个Array
Jan 28 Javascript
JavaScript 的继承
Oct 01 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
Apr 06 Javascript
AspNet中使用JQuery boxy插件的确认框
May 20 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
Jul 21 Javascript
js实现时间轴自动排列效果
Mar 09 Javascript
javascript数据结构中栈的应用之符号平衡问题
Apr 11 Javascript
利用JS做网页特效_大图轮播(实例讲解)
Aug 09 Javascript
mui上拉加载更多下拉刷新数据的封装过程
Nov 03 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
Oct 16 Javascript
jQuery+ajax实现文件上传功能
Dec 22 jQuery
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
用文本作数据处理
2006/10/09 PHP
以文本方式上传二进制文件的PHP程序
2006/10/09 PHP
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
微信小程序表单验证错误提示效果
2017/05/19 Javascript
vue-router实现webApp切换页面动画效果代码
2017/05/25 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
vue实现图书管理demo详解
2017/10/17 Javascript
微信小程序中this.data与this.setData的区别详解
2018/09/17 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
2019/05/14 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
详解Python中dict与set的使用
2015/08/10 Python
利用python打印出菱形、三角形以及矩形的方法实例
2017/08/08 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
Python3.5 Json与pickle实现数据序列化与反序列化操作示例
2019/04/29 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
Python re 模块findall() 函数返回值展现方式解析
2019/08/09 Python
python matplotlib拟合直线的实现
2019/11/19 Python
浅析Django中关于session的使用
2019/12/30 Python
python3.7.3版本和django2.2.3版本是否可以兼容
2020/09/01 Python
python 录制系统声音的示例
2020/12/21 Python
HTML5之消息通知的使用(Web Notification)
2018/10/30 HTML / CSS
家长给幼儿园的表扬信
2014/01/09 职场文书
促销活动计划书
2014/05/02 职场文书
优质服务演讲稿
2014/05/14 职场文书
行政工作试用期自我评价
2014/09/14 职场文书
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
莫言获奖感言(全文)
2015/07/31 职场文书
实验室安全管理制度
2015/08/05 职场文书
医生行业员工的辞职信
2019/06/24 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
JPA如何使用entityManager执行SQL并指定返回类型
2021/06/15 Java/Android