基于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 解析url的search方法
Feb 09 Javascript
jquery1.4 教程二 ajax方法的改进
Feb 25 Javascript
仿微博字符限制效果实现代码
Apr 20 Javascript
js数组Array sort方法使用深入分析
Feb 21 Javascript
深入理解Javascript里的依赖注入
Mar 19 Javascript
node.js入门教程
Jun 01 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
Mar 19 Javascript
jquery简单实现图片切换效果的方法
May 12 Javascript
JavaScript简单实现弹出拖拽窗口(一)
Jun 17 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
Aug 16 Javascript
Vue.js更改调试地址端口号的实例
Sep 19 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
Oct 29 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来检测proxy
2006/10/09 PHP
php提示undefined index的几种解决方法
2012/05/21 PHP
php中的strpos使用示例
2014/02/27 PHP
PHP使用CURL实现对带有验证码的网站进行模拟登录的方法
2014/07/23 PHP
php中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
PHP递归创建多级目录
2015/11/05 PHP
DHTML Slide Show script图片轮换
2008/03/03 Javascript
JavaScript 继承详解(二)
2009/07/13 Javascript
对xmlHttp对象的理解
2011/01/17 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
2011/02/23 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
2014/08/18 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
javascript框架设计之种子模块
2015/06/23 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
浅谈Javascript线程及定时机制
2015/07/02 Javascript
详解javascript立即执行函数表达式IIFE
2017/02/13 Javascript
基于cookie实现zTree树刷新后展开状态不变
2017/02/28 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
JavaScript实现刮刮乐效果
2020/11/01 Javascript
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
Python检测一个对象是否为字符串类的方法
2015/05/21 Python
Python自动发邮件脚本
2017/03/31 Python
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
Python 3.x 安装opencv+opencv_contrib的操作方法
2018/04/02 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
python+numpy实现的基本矩阵操作示例
2019/07/19 Python
如何基于Python实现电子邮件的发送
2019/12/16 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
奶茶专卖店创业计划书
2014/01/18 职场文书
2014年幼儿园后勤工作总结
2014/11/10 职场文书
详解Python内置模块Collections
2022/03/22 Python
angular4实现带搜索的下拉框
2022/03/25 Javascript