在项目中，我们经常会遇到需要格式化的金额和银行卡号。一般来说，我们通常有两种表达形式：输入框内的格式和输入框外的格式。这里我主要突出项目中遇到的输入框内部格式化的代码，框外格式化相对简单。

页面代码：

class=' wrap ' input type=' text ' id=' bank card '占位符='输入银行卡号'/div class=' wrap ' input type=' text ' id=' money num '占位符='输入金额'/div银行卡号格式。

//卡号格式为$ ('#银行卡')。on ('keyup '，formatbc)以4位数为一组；函数formatBC(e){ $(this)。attr('data-oral '，$(this)。val()。替换(//g ' ')；//$ ('#银行卡')。attr ('data-oral ')获取未格式化的卡号var self=$。trim(e . target . value)；var temp=this . value . replace(/ D/g ' ')。替换(/(.)(?=.)/g，' $ 1 ')；if(self . length 22){ this . value=self . substr(0，22)；返回this.value} if(temp！=this . value){ this . value=temp；}}这里，它是用“keyup”事件处理格式化的，中间每4位数字用一组空格隔开。但是数据格式化后，不利于计算，所以在当前元素中增加一个属性“data-oral”，保存未处理的数字，这样“data-oral”的值就可以在计算或传输到后台后得到。

格式化金额格式化金额格式化与银行卡号类似，但略有不同，因为金额每3位用逗号分隔，通常末尾有一个小数点，保留两位有效数字。我开始在这里使用“keyup”和“change”事件，但是IE浏览器与change事件存在兼容性问题，所以我们可以使用focus和blur事件来代替。

向元素添加属性“数据口述”类似于保存未格式化的数字。

/* *金额格式为每3位数字用逗号分隔。* 1.首先替换所有非数字项目。* 2.因为IE浏览器与变更事件存在兼容性问题，所以改用聚焦和模糊事件。* */$('#moneyNum ')。on('keyup '，format Mn)；$('#moneyNum ')。on({ focus : function(){ $(this))。attr('data-fmt '，$(this)。val())；//将当前值保存到自定义属性中}、blur :函数(){var oldval=$ (this)。attr(' data-fmt ')；//获取原始值var newVal=$(这个)。val()；//获取当前值if (oldVal！=NewVal){ if(NewVal==' ' | | ISnan(NewVal)){ this . value=' '；返回this.value} var s=this.value变化的温度；if(/)。(.*.|-).*/.测试){返回；} s=parseFloat((s ' ')。replace(/[^d.-]/g ' '))。toFixed(2)' '；var l=s.split(' . ')[0].拆分(“”)。反向()，r=s.split(' . ')[1];t=for(I=0；i l .长度；i ) { t=l[i] ((i 1) % 3==0 (i 1)！=l.length (l[i 1]！='-')?',' : '');} temp=t.split(')。反转()。联接(“”)。”r；this.value=temp返回this.value} } });函数格式(e){ this . value=this.value.replace(/[^d.-]/g ' ')；$(这个)。attr('数据-口头'，parsefloat(e.target.value.replace(/[^d.-]/g，"))))；//$ ('# moneynum ')。attr ('data-oral ')获取未格式化金额}其实我觉得输入框外的格式化更合理，大部分都是在输入框外格式化的。我写了一个例子，然后拿出来。

在输入框中对外格式化卡号的原理很简单，就是隐藏一个显示格式化模块，当输入框获得焦点时可以显示，失去焦点时可以隐藏。

页面代码：

div class='inputCard-wrap '输入类型=' text ' class=' input card ' div class=' panel card '/div/div样式类型='text/css ' .输入卡片包装{相对位置：} .输入卡片包装panelCard { display:无绝对位置：top :-34px；left :0 z-index : 100；背景-color : # fff9da；border:1px #ffce6e固体；padding:10px高度：40 pxfont-size : 1.7 em行高：18 pxcolor: # 585858}/样式格式化代码：

/* 银行卡号实时验证放大显示*/$('.输入卡')。keyup(函数{ var self=$ .trim(e.target.value)，parent=$(e.target).最近的('。inputCard-wrap ')，panel=$(' .panelCard '，父级)，val=self。替换(/ D/g ' ')；如果(自我。长度18){这个。价值=自我。substr(0，18)；返回this.value} if(val==self){ panel。show()；val=self.replace(/(.)(?=.)/g，' $ 1 ')；面板。html(val)；} else { panel。hide()；回归自我；}});$('.输入卡')。解除绑定(' focusin ')；$('.输入卡')。bind('focusin '，function(e){ var self=$ .trim(e.target.value)，parent=$(e.target).最近的('。inputCard-wrap ')，panel=$(' .' panelCard '，父级)，val=self.replace(/(.)(?=.)/g，' $ 1 ')；如果（瓦尔！=' '){面板。show()；面板。html(val)；}});$('.输入卡')。解除绑定(' focusout ')；$('.输入卡')。绑定(' focusout '，函数{ var parent=$(e.target).最近的('。inputCard-wrap ')，panel=$(' .' panelCard '，父级);面板。hide()；});以上就是本文的全部内容，希望对大家的学习有所帮助。