基于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 二分法(数组array)
Apr 24 Javascript
js下用eval生成JSON对象
Sep 17 Javascript
浅析JavaScript事件和方法
Feb 28 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
May 27 Javascript
详解Node.js中的事件机制
Sep 22 Javascript
javascript函数的四种调用模式
Jan 08 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 Javascript
bootstrap响应式表格实例详解
May 15 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
Mar 05 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
简单了解Vue computed属性及watch区别
Jul 10 Javascript
Vue实现手机计算器
Aug 17 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自定义函数call_user_func和call_user_func_array详解
2011/07/14 PHP
php教程之魔术方法的使用示例(php魔术函数)
2014/02/12 PHP
php实例分享之二维数组排序
2014/05/15 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
jQuery使用手册之一
2007/03/24 Javascript
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
js内存泄露的几种情况详细探讨
2013/05/31 Javascript
js打开windows上的可执行文件示例
2014/05/27 Javascript
详谈JavaScript 匿名函数及闭包
2014/11/14 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
详解JS面向对象编程
2016/01/24 Javascript
使用BootStrap实现悬浮窗口的效果
2016/12/13 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
jQuery日程管理控件glDatePicker用法详解
2017/03/29 jQuery
vue富文本框(插入文本、图片、视频)的使用及问题小结
2018/08/17 Javascript
JS返回页面时自动回滚到历史浏览位置
2018/09/26 Javascript
使用javascript做时间倒数读秒功能的实例
2019/01/23 Javascript
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
安装Python的教程-Windows
2017/07/22 Python
tensorflow tf.train.batch之数据批量读取方式
2020/01/20 Python
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
使用HTML5 IndexDB存储图像和文件的示例
2018/11/05 HTML / CSS
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
运动会通讯稿50字
2014/01/30 职场文书
公安个人四风问题对照检查及整改措施
2014/10/28 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers
Python 把两层列表展开平铺成一层(5种实现方式)
2021/04/07 Python
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python