基于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 window.onload 加载多个函数的方法
Nov 02 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
Nov 09 Javascript
JS HTML5实现拖拽移动列表效果
Aug 27 Javascript
js微信扫描二维码登录网站技术原理
Dec 01 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
Dec 31 Javascript
Vue.js学习教程之列表渲染详解
May 17 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
Dec 12 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
Feb 03 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
Aug 28 Javascript
JavaScript私有变量实例详解
Jan 24 Javascript
详解webpack4.x之搭建前端开发环境
Mar 28 Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 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+xslt在windows平台上
2006/10/09 PHP
PHP设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
PHP图片加水印实现方法
2016/05/06 PHP
mysql alter table命令修改表结构实例详解
2016/09/24 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
一个简单的Ext.XTemplate的实例代码
2012/03/18 Javascript
别了 JavaScript中的isXX系列
2012/08/01 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
2014/10/17 Javascript
使用javascript实现判断当前浏览器
2015/04/14 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
Postman模拟发送带token的请求方法
2018/03/31 Javascript
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
2018/12/29 Javascript
vue实现井字棋游戏
2020/09/29 Javascript
python通过定义一个类实例作为ftp回调方法
2015/05/04 Python
详解Python中的序列化与反序列化的使用
2015/06/30 Python
Python学生信息管理系统修改版
2018/03/13 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
中医药大学毕业生自荐信
2013/11/08 职场文书
年度考核自我鉴定
2013/11/09 职场文书
2014年幼儿园重阳节活动方案
2014/09/16 职场文书
培训督导岗位职责
2015/04/10 职场文书
小学六一主持词开场白
2015/05/28 职场文书
初二物理教学反思
2016/02/19 职场文书
python机器学习实现oneR算法(以鸢尾data为例)
2022/03/03 Python