基于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);

赞 (0)

相关推荐

  • iOS开发之自定义UITextField的方法

    iOS开发之自定义UITextField的方法

    UITextField是IOS开发中用户交互中重要的一个控件,常被用来做账号密码框,输入信息框等. 观察效果图 UITextField有以下几种特点: 1.默认占位文字是灰色的 2.当光标点上去时,占位文字变为白色 3.光标是白色的 接下来我们通过不同的方法来解决问题 一.将xib中的UITextField与代码关联 通过NSAttributeString方法来更改占位文字的属性 (void)viewDidLoad { [super viewDidLoad]; // Do any additio

  • js格式化输入框内金额、银行卡号

    js格式化输入框内金额、银行卡号

    我们在项目中经常遇到需要格式化的金额数和银行卡号,一般我们常见的有两种表现形式:输入框内格式化和输入框外格式化.这里我主要把我在项目中遇到的输入框内部格式化的,代码亮出来,框外的格式化相对简单一点. 页面代码: <div class="wrap"> <input type="text" id="bankCard" placeholder="输入银行卡号"> </div> <div cl

  • 使用UITextField限制输入金额是正确小数

    要判断输入金额为正确金额的方法有两个,一个是用正则表达式,另一个就是用textfield的代理方法 有时候难免遇到这样的需求,不符合规则的金额就不让输入时,那用这种方法比较合理 如果设置输入键盘为Decimal Pad时,输入为数字和小数点:如果设置键盘为Number Pad时,输入为纯数字 非以上情况时,那要判断输入时是否为合理输入,如代码里 复制代码 代码如下: (single >='0' && single<='9') || single=='.' 如果本身仅仅是输入数字

  • iOS 中 使用UITextField格式化银行卡号码的解决方案

    今天做格式化银行卡,避免重复造轮子,找度娘查了下,看到一个不错的实现方式,记录下来,并附带实现思路 #pragma mark - UITextFieldDelegate UITextField键入字符后调用 - (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string { //拿到为改变前的字符串 NSStri

  • 解决iOS7上UITextField限制字数输入导致崩溃问题的方法

    解决iOS7上UITextField限制字数输入导致崩溃问题的方法

    在一些场景中,需要限制用户的输入字数,例如在textField里进行控制(textView也类似,崩溃原因也相同),如图所示 系统会监听文本输入,需要注意的第一点是输入法处于联想输入还未确定提交的时候,对于第三方输入法例如搜狗,联想状态下的输入,是监听不到,除非点击确定输入到textField,才会触发changed事件. 但对于系统键盘,联想状态下的输入也会监听,这里如果不处理就容易发生崩溃,例如当快要达到字数限制时,继续输入,此时textField.text =联想输入文字+textFiel

  • iOS应用开发中使UITextField实现placeholder属性的方法

    我们都知道iOS开发中的UITextField有个placeholder属性,placeholder可以很方便引导用户输入.但是UITextView却没有placeholder属性. 一.猥琐的方法 如何让UITextView也有placeholder功能呢?今天给各位分享一个比较猥琐的做法.思路大概是这样的: 把UITextView的text当placeholder使用. 在开始编辑的代理方法里清除placeholder. 在结束编辑的代理方法里在设置placeholder. 实现方法: 1.

  • IOS UI学习教程之设置UITextField各种属性

    UITextField是IOS中非常常用的一个控件,用来接收用户输入信息,完成应用和用户的交互.它的主要属性设置如下: //初始化textfield并设置位置及大小 UITextField *text = [[UITextField alloc]initWithFrame:CGRectMake(20, 20, 130, 30)]; //设置边框样式,只有设置了才会显示边框样式 text.borderStyle = UITextBorderStyleRoundedRect; typedef enu

  • 基于jquery的bankInput银行卡账号格式化

    基于jquery的bankInput银行卡账号格式化

    jquery bankInput插件是银行卡进行格式化显示,能控制文本框输入最小最大个数.控制只能输入数字.控制不能粘贴不能使用输入法.同时插件能实现自动加载格式化显示和支持非输入框的格式话显示. 复制代码 代码如下: <script type="text/javascript" src="__JS__/jquery.bankInput.js"></script> <script>$(".account").b

  • 基于jquery的web页面日期格式化插件

    复制代码 代码如下: (function ($) { var FormatDateTime = function FormatDateTime() { }; $.FormatDateTime = function (obj, IsMi) { var correcttime1 = eval('( new ' + obj.replace(new RegExp("\/", "gm"), "") + ')'); var myDate = correctt

  • 基于jQuery实现的Ajax 验证用户名唯一性实例代码

    基于jQuery实现的Ajax 验证用户名唯一性实例代码

    JSP部分代码: <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <%@include file="/common/header.jsp"%> <title>用户管理</title> <script type="text/javascript&quo

  • 基于jQuery Easyui实现登陆框界面

    基于jQuery Easyui实现登陆框界面

    效果图 CSS a{ text-decoration:none; } body{ margin:0px; } #header{ width:100%; height:30px; background-color:#E0EFFF; padding-top: 5px; padding-bottom: 10px; } #header .logo{ margin-left: 50px; font-size: 24px; font-family: 微软雅黑; } #picture{ width:100%;

  • 基于jquery ajax的多文件上传进度条过程解析

    基于jquery ajax的多文件上传进度条过程解析

    这篇文章主要介绍了基于jquery ajax的多文件上传进度条过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果图 前端代码,基于jquery <!DOCTYPE html> <html> <head> <title>主页</title> <meta name="viewport" content="width=device-width,initia

  • php基于jquery的ajax技术传递json数据简单实例

    本文实例讲述了php基于jquery的ajax技术传递json数据简单实现方法.分享给大家供大家参考,具体如下: html页面: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="text/javascript" src="jquery-1.8.2.mi

  • 基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法

    基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法

    情景 目前有个需求是在文本框填入内容,自动触发keyup事件,下拉列表会自动过滤相应的选项,但是使用了$,ajax后发现,每次触发事件时,都导致整个网页闪烁,触发了全局ajax事件 代码片段 $.ajax({ type: "POST", url: root + "/xxx, data: requestData, dataType: "json", success: function(data){ // 清空列表 $("#formOpinion #

  • 基于Jquery.history解决ajax的前进后退问题

    以下内容是关于Jquery.history解决ajax的前进后退问题,具体详情请看下文. 本文的前提是基于后台的,所以这里不会考虑seo的问题.同时,基于后台的管理系统,也不需要被收藏,所以也不会考虑刷新的这种类似直接敲网址的情况!!! 这里使用的是html5中的history.state 来解决. 网上已经有了js的开源解决方案pushState.详见pjax 但是这个方案不适合我的项目(后台项目),尤其是主要的方法有点不够用. 我使用的是  jquery.history.js  可以参考这个

  • 基于jQuery的网页影音播放器jPlayer的基本使用教程

    jPlayer简介: 想在网页上播放背景音乐,不想用html标签的方式,因为那样只有音乐全部下载完以后才能播放,还容易出现跨浏览器兼容性的问题,于是选了一款基于jQuery的播放器jPlayer来做. 设置jPlayer的尺寸大小 使用构造函数配置jPlayer({size:Object})设置jPlayer的高宽. 使用构造函数配置jPlayer({sizeFull:Object})设置全屏尺寸. 注意可通过构造函数配置jPlayer({backgroundColor:"#RRGGBB&quo

  • 基于jQuery的消息提示插件 DivAlert之旅（二）

    基于jQuery的消息提示插件 DivAlert之旅（二）

    改进的代码部分主要如下: 1.创建default.css文件: 代码 复制代码 代码如下: img { vertical-align:middle; } .jBg { position: absolute; top: 0; left: 0; z-index: 9999; background-color: #999; filter: alpha(opacity=70); opacity: 0.7; } .jWrap { position: absolute; border: 1px solid

随机推荐