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

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

网页代码：

银行卡号格式化

一组4个数字格式
$（#卡），（KeyUp

功能formatbc（e）{

$（这）。Attr（数据口，$（这）。瓦迩（更换）（ / + / G ））；
/ / $（#卡），Attr（数据口服）为格式化卡

VaR自美元。修剪（e.target。值）；
VaR的温度= this.value.replace（ / / g，更换（' '）/（…）（=。）/ g，1美元）；
如果（self.length > 22）{
this.value = self.substr（0, 22）；
返回this.value；
}
如果（临时）！=这个值{）{
this.value =温度；
}
}

这里使用的KeyUp事件处理的格式，由一组在每4个数字中间空格隔开。但数据格式不好计算，所以添加一个属性数据口服到当前元素保存的未经加工的数量，使数据口服可以计算出的值或转移的背景。

量的格式

量的格式类似于银行卡的数字格式，但这是有点不同，因为每一个3位数的数字量是用逗号分隔，通常有小数点和两位数保存。在这里我开始使用KeyUp和改变的事件，但IE浏览器有兼容性问题更改事件，可以集中、模糊事件所取代。

类似于元素添加属性数据，以保存未格式化的数字。

*
*每3个数字组成一组逗号分隔格式。
* 1。首先替换非数字
* 2。而不是焦点和模糊事件由于IE浏览器的兼容性问题的变化事件。
**
$（# moneynum ），（KeyUp

$（# moneynum ），（{
焦点：函数（）{
$（这）。Attr（数据格式化，$（这）。瓦迩（））； / /电流值被存储在一个自定义属性
}，
Blur：函数（）{
Var oldVal=$(this).Attr (data-fmt); / / get the original value
newval = $（var（这个）。瓦尔）； / /获取当前值
如果（oldval！= newval）{
如果（newval = =isnan| |（newval））{
this.value = ；
返回this.value；
}
var = this.value；
VaR的温度；

如果（ /，+（ .. * 。| -）。* /。试验（S））{
返回；
}
S = parseFloat（（S + ）。更换（ / { ^ D - } / g，）），ToFixed（2）+ ；
var = s.split（，）{ 0 }。分裂（）反（），
R = s.split（，）{ 1 }；
T；
对于（i = 0；i <长度；i + +）{
（+ i（1）% = 3 = 0（i + 1）= L长度（l { 1）！！）
}
温度= t.split（）。反（）。加入（）++ R；
this.value =温度；
返回this.value；
}
}
}）；

功能formatmn（e）{
this.value = this.value.replace（ / { ^ D - } / g，）；
$（这）。Attr（数据口服
/ / $（# moneynum）。Attr（数据口服）为无量
}
事实上，我认为输入框之外的格式比较合理，大部分都是在输入框之外格式化的，我写了一个例子来把它拔出来。

输入框外部格式化的卡号

原理很简单，就是隐藏显示格式化的模块。当输入框获得焦点时，当焦点丢失时它将被隐藏。
网页代码：


inputcard包{。
职位：相对；
}
。inputcard包装。panelcard {
显示：无；
位置：绝对；
上图：- 34px；
左：0；
Z指数：100；
背景颜色：# fff9da；
边境：1px # ffce6e固体；
填料：10px；
身高：40px；
字体大小：1.7em；
行高：18px；
颜色：# 585858；
}

格式化代码：

/银行卡号码实时验证放大倍率*
$（。inputcard）。Keyup（function（e）{
VaR自美元。修剪（e.target。值），
母= $（e.target）。最近（。inputcard包），
面板=（ panelcard美元。
val = self.replace（ / /克，）；
如果（self.length > 18）{
this.value = self.substr（0, 18）；
返回this.value；
}
如果（= =自我）{
panel.show（）；
（val = self.replace /（…）（。）/ g，1美元）；
panel.html（Val）；
其他{ }
panel.hide（）；
回归自我；
}
}）；
$（。inputcard ）Unbind（'focusin）；
$（。inputcard）。Bind（'focusin功能（e）{ {）
VaR自美元。修剪（e.target。值），
母= $（e.target）。最近（。inputcard包），
面板=（ panelcard美元。
（val = self.replace /（…）（。）/ g，1美元）；
如果（瓦迩）！=）{
panel.show（）；
panel.html（Val）；
}
}）；
$（。inputcard ）Unbind（'focusout）；
$（。inputcard）。Bind（'focusout功能（e）{ {）
VaR（e.target母=美元）。最近（。inputcard包），
面板=（ panelcard美元。
panel.hide（）；
}）；
以上是本文的全部内容，希望能对大家有所帮助。