jquery银行卡输入控件使用
2015-05-29 13:02
567 查看
jquery.bankInput.js
使用方法
测试案例
参考出处
http://www.thinksaas.cn/group/topic/41340/
/** × JQUERY 模拟淘宝控件银行帐号输入 **/ (function($){ // 输入框格式化 $.fn.bankInput = function(options){ var defaults = { min : 16, // 最少输入字数 max : 25, // 最多输入字数 deimiter : ' ', // 账号分隔符 onlyNumber : true, // 只能输入数字 copy : false // 允许复制 }; 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);
使用方法
1.默认使用方法: $("#account").bankInput(); 2.设置参数 $("#account").bankInput({min:16,max:25,deimiter,' '}); 3.非文本框格式化显示 $(".account").bankList();
测试案例
<!doctype html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script src="jquery.bankInput.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#account1').bankInput(); $('#account2').bankInput({min:4,max:25,deimiter:','}); $('#account3').bankList(); }) </script> </head> <body> 帐号1:<input id="account1"/><br/> 帐号2:<input id="account2"/><br/> 帐号3:<input id="account3"/><br/> </body> </html>
参考出处
http://www.thinksaas.cn/group/topic/41340/
相关文章推荐
- jquery.pagination结合jquery.tmpl封装前台分页--纯js实现与后端语言无关--适合所有前台分页情况
- 适用于多种设备的的滑块幻灯片插件--jquery插件Swiper
- 使用jquery实现上下左右移动效果
- jQuery 动画 - animate() 方法
- jQuery serializeArray() 方法的一些注意事项
- 9.使用原生js实现类似于jquery的动画
- 不定义JQuery插件,不要说会JQuery
- JQuery+CSS实现图片上放置按钮的方法
- springMVC,jQuery ajax传值的中文乱码处理
- 编写jQuery插件
- Jquery解析json字符串及json数组的方法
- jQuery实现返回顶部效果的方法
- jQuery $(#) id 中带符号怎么处理?jQuery $()中带特殊符号
- jquery读取xml文件实现省市县三级联动的方法
- Jquery动态添加输入框的方法
- jquery倒计时插件用法
- jquery封装了一个简洁轻巧的可拖动可自定义样式的纯div+css带遮罩层的仿模态弹出框
- 【Jquery】each中跳出函数
- js和jquery验证密码必须为字母加数字
- Jquery里面三个文档操作方法比较-empty(),detach()和remove