Home >Web Front-end >JS Tutorial >BankInput bank card account formatting based on jquery_jquery

BankInput bank card account formatting based on jquery_jquery

WBOY
WBOYOriginal
2016-05-16 17:50:221404browse

The jquery bankInput plug-in is a formatted display of bank cards. It can control the minimum and maximum number of inputs in the text box, control only the input of numbers, control not pasting, and the use of input methods. At the same time, the plug-in can automatically load formatted display and support formatted display of non-input boxes.

Copy code The code is as follows:


<script>$(".account").bankInput()$(".account").bankList( ) <br></script>

1. Default usage:
$("#account").bankInput();
2. Set parameters
$ ("#account").bankInput({min:16,max:25,deimiter,' '});
3. Non-text box formatted display
$(".account").bankList() ;
Copy code The code is as follows:

/**
× JQUERY simulates Taobao control bank account input
* @Author 312854458@qq.com Rising Sun
**/
(function($){
//Input box formatting
$.fn.bankInput = function(options){
var defaults = {
min : 10, // Minimum number of input characters
max : 25, // Maximum number of characters to enter
deimiter : ' ', // Account delimiter
onlyNumber : true, // Only numbers can be entered
copy : true // Allow copying
} ;
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('Enter at least 'opts.min' account information! ');
obj.focus();
}
})
}
// List display formatting
$.fn.bankList = function(options){
var defaults = {
deimiter : ' ' // delimiter
};
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);
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn