js格式化输入框内金额、银行卡号
网络编程 2021-07-04 21:04www.168986.cn编程入门
这篇文章主要介绍了js格式化输入框内金额、银行卡号,采用“keyup”事件处理格式化,每4位数一组中间空格隔开,如何格式化输入框内金额、银行卡号,需要了解的朋友可以参考一下
我们在项目中经常遇到需要格式化的金额数和银行卡号,一般我们常见的有两种表现形式输入框内格式化和输入框外格式化。这里我主要把我在项目中遇到的输入框内部格式化的,代码亮出来,框外的格式化相对简单一点。
页面代码
<div class="wrap"> <input type="text" id="bankCard" placeholder="输入银行卡号"> </div> <div class="wrap"> <input type="text" id="moneyNum" placeholder="输入金额"> </div>
银行卡号格式化
//卡号每4位一组格式化 $("#bankCard").on("keyup", formatBC); function formatBC(e){ $(this).attr("data-oral", $(this).val().replace(/\ +/g,"")); //$("#bankCard").attr("data-oral")获取未格式化的卡号 var self = $.trim(e.target.value); var temp = this.value.replace(/\D/g, '').replace(/(....)(?=.)/g, '$1 '); if(self.length > 22){ this.value = self.substr(0, 22); return this.value; } if(temp != this.value){ this.value = temp; } }
这里用“keyup”事件处理格式化,每4位数一组中间空格隔开。数据格式化以后又不利于计算,所以给当前元素添加一个属性“data-oral”,保存未处理的数字,这样计算或者要传递到后台可以获取“data-oral”的值。
金额格式化
金额格式化和银行卡号格式化类似,但又有点不同,因为金额每3位数一组用逗号隔开,一般有小数点且保留两位有效数字。这里我开始用到“keyup”和"change"事件,IE浏览器对于change事件存在兼容问题,可以改用focus和blur事件代替。
类似给元素添加属性“data-oral”保存未格式化的数字。
/ 金额每3位数一组逗号隔开格式化 1.先把非数字的都替换掉 2.由于IE浏览器对于change事件存在兼容问题,改用focus和blur事件代替。 / $("#moneyNum").on("keyup", formatMN); $("#moneyNum").on({ focus: function(){ $(this).attr("data-fmt",$(this).val()); //将当前值存入自定义属性 }, blur: function(){ var oldVal=$(this).attr("data-fmt"); //获取原值 var newVal=$(this).val(); //获取当前值 if (oldVal!=newVal) { if(newVal == "" || isNaN(newVal)){ this.value = ""; return this.value; } var s = this.value; var temp; if(/.+(\..\.|\-)./.test(s)){ return; } s = parseFloat((s + "").replace(/[^\d\.\-]/g, "")).toFixed(2) + ""; var l = s.split(".")[0].split("").reverse(), r = s.split(".")[1]; t = ""; for(i = 0; i < l.length; i ++ ) { t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length && (l[i+1]!='-')? "," : ""); } temp = t.split("").reverse().join("") + "." + r; this.value = temp; return this.value; } } }); function formatMN(e){ this.value = this.value.replace(/[^\d\.\-]/g,""); $(this).attr("data-oral", parseFloat(e.target.value.replace(/[^\d\.-]/g, ""))); //$("#moneyNum").attr("data-oral")获取未格式化的金额 }
其实我觉得,输入框外的格式化更合理一些,大多数都是输入框外部格式化的,我写了个例子也拉出来吧。
输入框外部格式化卡号
原理很简单,就是隐藏一个显示格式化的模块,当输入框获取焦点时显示,失去焦点时隐藏即可。
页面代码
<div class="inputCard-wrap"> <input type="text" class="inputCard"> <div class="panelCard"></div> </div> <style type="text/css"> .inputCard-wrap{ position: relative; } .inputCard-wrap .panelCard{ display: none; position: absolute; :-34px; left:0; z-index: 100; background-color:#fff9da; border:1px #ffce6e solid; padding:10px; height:40px; font-size: 1.7em; line-height:18px; color:#585858; } </style>
格式化代码
/ 银行卡号实时验证放大显示 / $(".inputCard").keyup(function(e){ var self = $.trim(e.target.value), parent = $(e.target).closest(".inputCard-wrap"), panel = $(".panelCard", parent), val = self.replace(/\D/g, ''); if(self.length > 18){ this.value = self.substr(0, 18); return this.value; } if(val == self){ panel.show(); val = self.replace(/(....)(?=.)/g, '$1 '); panel.html(val); }else{ panel.hide(); return self; } }); $(".inputCard").unbind('focusin'); $(".inputCard").bind('focusin',function(e){ var self = $.trim(e.target.value), parent = $(e.target).closest(".inputCard-wrap"), panel = $(".panelCard", parent), val = self.replace(/(....)(?=.)/g, '$1 '); if(val != '') { panel.show(); panel.html(val); } }); $(".inputCard").unbind('focusout'); $(".inputCard").bind('focusout',function(e){ var parent = $(e.target).closest(".inputCard-wrap"), panel = $(".panelCard", parent); panel.hide(); });
以上就是本文的全部内容,希望对大家的学习有所帮助。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程