Bank input bank card account format based on jquery

Keywords: JQuery Javascript

jquery bankInput plug-in is used to format and display the bank card. It can control the minimum and maximum number of text box input, control only the number of input, control not paste and cannot use the input method. At the same time, the plug-in can automatically load the format display and support the format display of non input box.

The code is as follows:

<script type="text/javascript" src="__JS__/jquery.bankInput.js"></script> 
<script>$(".account").bankInput()$(".account").bankList() 
</script> 

1. Default usage: $("account").bankInput()


2. Set parameters: $("account").bankInput({min:16,max:25,deimiter, '})


3. Non text box format display: $(". account").bankList();

 

4. Format multiple text boxes at the same time: $("gridvieweditmark? Panel"). Find (". Bank? Account? No"). Each (function() {$(this). Bankinput()});

 

 

The code is as follows:

/** 
× JQUERY Simulate bank account input of Taobao control 
* @Author 312854458@qq.com Rising sun 
**/ 
(function($){ 
// Input box format 
$.fn.bankInput = function(options){ 
var defaults = { 
min : 10, // Minimum number of words 
max : 25, // Maximum number of words 
deimiter : ' ', // Account separator 
onlyNumber : true, // Only numbers can be entered 
copy : true // Allow replication 
}; 
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('Least input'+opts.min+'Account information!'); 
obj.focus(); 
} 
}) 
} 
// List display format 
$.fn.bankList = function(options){ 
var defaults = { 
deimiter : ' ' // Separator 
}; 
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); 

 

Posted by toms on Wed, 25 Dec 2019 07:26:39 -0800