input框输入金额显示逗号分隔，显示百分位

比如输入：1000000，则显示为1,000,000（或者是保留3位小数：1,000,000.000）

知识点:

1）JavaScript parseFloat() 函数：

定义：parseFloat() 函数可解析一个字符串，并返回一个浮点数

语法：parseFloat(string)

　　a）parseFloat 将它的字符串参数解析成为浮点数并返回；

　　b）如果在解析过程中遇到了正负号（+ 或 -）、数字 (0-9)、小数点，或者科学记数法中的指数（e 或 E）以外

的字符，则它会忽略该字符以及之后的所有字符，返回当前已经解析到的浮点数；

　　c）参数字符串首位的空白符会被忽略；

注意：如果参数字符串的第一个字符不能被解析成为数字，则 parseFloat 返回 NaN。

提示：您可以通过调用 isNaN 函数来判断 parseFloat 的返回结果是否是 NaN。如果让 NaN 作为了任意数学运算的操作数，则运算结果必定也是 NaN。

1 parseFloat("10")                10
2 parseFloat("10.00")             10
3 parseFloat("10.33")             10.33
4 parseFloat("34 45 66")          34
5 parseFloat("   60   ")          60
6 parseFloat("40 years")          40
7 isNaN(parseFloat("40 years"))   false
8 parseFloat("He was 40")         NaN
9 isNaN(parseFloat("He was 40"))  true

2）JavaScript toFixed() 方法：

定义：toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。

语法：NumberObject.toFixed(num)，num参数必需，规定小数的位数，是 0 ~ 20 之间的值，包括 0 和 20，有些实

现可以支持更大的数值范围。如果省略了该参数，将用 0 代替。

如下：把数字舍入为仅有一位小数的数字：

1 var num =13.36;
2 alert(num.toFixed(1));    13.4

3）JavaScript isNaN() 函数：

定义：isNaN() 函数用于检查其参数是否是非数字值。

语法：isNaN(x)，如果 x 是特殊的非数字值 NaN（或者能被转换为这样的值），返回的值就是 true。如果 x 是其他值,则返回 false，前提条件：x不能为空。

提示：isNaN() 函数通常用于检测 parseFloat() 和 parseInt() 的结果，以判断它们表示的是否是合法的数字。当然也可以用 isNaN() 函数来检测算数错误，比如用 0 作除数的情况

4）JavaScript reverse() 方法：

定义：reverse() 方法用于颠倒数组中元素的顺序

语法：array.reverse()

5）JavaScript split() 方法：

定义：split() 方法用于把一个字符串分割成字符串数组

语法：stringObject.split(separator,howmany)

　　参数separator：必需。字符串或正则表达式，从该参数指定的地方分割 stringObject；

　　参数howmany：可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度；

注释：如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。

注释：String.split() 执行的操作与 Array.join 执行的操作是相反的

宝典在这

6）JavaScript join() 方法：

定义：join() 方法用于把数组中的所有元素放入一个字符串

语法：arrayObject.join(separator)

　　参数separator：可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

提示：join("")则意味将数组拼接成字符串

需求：

input框输入金额，要求按千分位显示并四舍五入且保留3位小数，其中要求只能输入大于的0的数字，小数位不作限制

分析：

1、四舍五入且保留指定小数位：toFixed() 方法

2、输入大于0的数字且输入时小数位不做限制：正则表达式校验

　　1）正整数部分（>0整数）：[1-9][0-9]*　　表示以1-9任意一个数开头，*表示出现0次或多次；

　　2）含小数部分（注意不能是0.0000...）：[0].[0-9]{0,2}[1-9]d*|[1-9][0-9]*.d*　　表示整数位0的小数保留3位四舍五入后不能是0.000，整数不为0的都可以

3、整数部分加千分位：

　　1）先把经过toFixed()处理后，利用split(".")将整数和小数分开并分包存储；

　　 2）整数部分加千分位：可以从低位→高位，每隔3位插入逗号，还有注意最高位不能以逗号开头；

　　　　2.1）利用split("")将整数部分切割成数组；

　　　　2.2）利用reverse()将切割后数组颠倒；

　　　　2.3）遍历数组：数组下标+1和3求余（数组下标从0开始）来重新拼接字符串或者push给新数组；

　　　　2.4）再利用reverse()颠倒新数组，利用join("")拼接；

4、字符串拼接：整数部分加千分位+"."+小数部分;

<input class="base-form-input " >

javaScript脚本（红色部分需要根据情况修改）

//光标离开输入的金额四舍五入并保留3位小数
    $("#mny").blur(function(){//输入obj=123456.7890
        var obj = this.value;
        var mnyReg = /^([1-9][0-9]*|(([0].[0-9]{0,2}[1-9]d*|[1-9][0-9]*.d*)))$/;//根据需求修改
        if(!(mnyReg.test(obj))){
              layer.tips("请输入正确的资金", $(this).attr("id"),{time:1000});
              return;
          }
        var n = 3; //保留得小数位
        obj = parseFloat(obj).toFixed(n); //obj=123456.789
        var left = obj.split(".")[0].split("").reverse();//left = ["6","5","4","3","2","1"]
        var right = obj.split(".")[1]; //right = "789"
        var total = new Array(); 
        for (i = 0; i < left.length; i++) { 
            total.push(left[i]);
            if((i + 1) % 3 == 0 && (i + 1) != left.length){
                total.push(",");
            }
        } //total = ["6","5","4",",","3","2","1"]
        $("#mny").val(total.reverse().join("") + "." + right); 
    })

//光标进入，去除金额千分位，并去除小数后面多余的0
$("#mny").focus(function(){
        var oldMny = this.value.replace(/,/g, '');
        if(oldMny.indexOf(".")>0){
            oldMny = oldMny.replace(/0+?$/,"");//去除尾部多余的0
            oldMny = oldMny.replace(/[.]$/,"");//如果最后一位是.则去掉
        }
        this.value = oldMny;
    })

取值进行保存操作的时候，要把千分位去掉：可以用全局匹配替换逗号

var reg_mny = $("#mny").val().trim().replace(/,/g, '');

如果想光标再次进入的时候显示原先输入的值，可以再方法外面定义一个变量var oldMny，存储输入的金额：

当光标进入时候，取oldMny赋值给input（最原始的未四舍五入的值）；光标离开时候，则把input值存到oldMny；

input框输入金额显示逗号分隔，显示百分位

相关推荐