JQ、JS　自动给文本框的数字加千分位(带format-number插件)

来源：互联网发布：windows 漏洞扫描编辑：程序博客网时间：2024/04/29 23:24

1、方法一为JQ，实时变化，适合我自己的需求。

JQ：

$("#input_box").on("keyup",function(){this.value =this.value.replace(/,/g, '').replace(/\d+?(?=(?:\d{3})+$)/g, function(s){                return s +',';            });$("#input_box").val(this.value);});

Html

<input type="text" id="input_box" value=""/>

2、以下方法是参考其他网友的

方法一：

<head><title>Test</title></head>
<body>
    <input type="text" id="input_box" value=""/>
    <script>
        var input_box = document.getElementById("input_box"),
            valueBuf,
            _valueBuf;
        input_box.onblur =function(){
            valueBuf =this.value;
            _valueBuf = valueBuf.replace(/(\d{3})+$/g, function(){
                var args = arguments,
                    len = args.length,
                    ret = args[0].match(/(\d{3})/g).join(',');
                if(args[0] !== args[len -1]){
                    ret =','+ ret;
                }
                return ret;
            });
            this.value = _valueBuf;
        }

        input_box.onfocus =function(){
            if(valueBuf){
                this.value = valueBuf;
            }
        }
    </script>
</body>
</html>

方法二:

<head><title>Test</title>

</head>
<body>
    <input type="text" id="input_box" value=""/>
    <script>
        var input_box = document.getElementById("input_box"),
            valueBuf;
        window.onload =function(){
            input_box.value ='';
        }
        input_box.onblur =function(){
            valueBuf =this.value;
            this.value = valueBuf.replace(/\d{3}(?=(?:\d{3})*$)/g, function(){
                var args = arguments;
                if(args[1] ===0){
                    return args[0];
                }else{
                    return','+args[0];
                }
            });
        }
        input_box.onfocus =function(){
            if(valueBuf){
                this.value = valueBuf;
            }
        }
    </script>
</body>
</html>

方法三:

<head><title>Test</title></head>
<body>
    <input type="text" id="input_box" value=""/>
    <script>
        var input_box = document.getElementById("input_box");
        input_box.onblur =function(){
            this.value =this.value.replace(/\d+?(?=(?:\d{3})+$)/g, function(s){
                return s +',';
            });
        }
        input_box.onfocus =function(){
            this.value =this.value.replace(/,/g, '');
        }
    </script>
</body>
</html>

加强功能版：

demo演示地址请点击 http://www.lovewebgames.com/jsmodule/format-number.html

演示代码

<script src="../src/jquery-1.11.2.js"></script>    <script src="../src/format-number.js"></script>    <div>整数：<input type="text" data-type="int" data-name="int"/></div>    <script>        var n1 = new FormatNumber();        n1.init({trigger:$('[data-type="int"]'),decimal:0});    </script>    <div>整数可为负：<input type="text" data-type="int2" data-name="int"/></div>    <script>        var n2 = new FormatNumber();        n2.init({trigger:$('[data-type="int2"]'),decimal:0,minus:true});    </script>    <div>两位小数(默认)：<input type="text" class="has-minus" value="1112212.221" data-type="number" data-name="as"/></div>    <script>        var n3 = new FormatNumber();        n3.init({trigger:$('[data-type="number"]')});    </script>    <div>3位小数并且可为负数：<input type="text" data-name="pc" data-type="pecent"/></div>    <script>        var n4 = new FormatNumber();        n4.init({trigger:$('[data-type="pecent"]'),decimal:3,minus:true});    </script>    <div>4位小数并且不可为负数：<input type="text" data-name="pc" data-type="pecent2"/></div>    <script>        var n5 = new FormatNumber();        n5.init({trigger:$('[data-type="pecent2"]'),decimal:4});    </script>    <div>标签：123123123.13211=<span id="sp_number">123123123.13211</span></div>    <script>    $('#sp_number').FormatNumber({decimal:4})    </script>

文件下载(请支持下载，谢谢)：

http://download.csdn.net/detail/ybb350680013/8999661

数字与千分位数字互换Js方法

/** * 数字格式转换成千分位 *@param{Object}num */function commafy(num){   if((num+"").trim()==""){      return"";   }   if(isNaN(num)){      return"";   }   num = num+"";   if(/^.*\..*$/.test(num)){      varpointIndex =num.lastIndexOf(".");      varintPart = num.substring(0,pointIndex);      varpointPart =num.substring(pointIndex+1,num.length);      intPart = intPart +"";       var re =/(-?\d+)(\d{3})/       while(re.test(intPart)){          intPart =intPart.replace(re,"$1,$2")       }      num = intPart+"."+pointPart;   }else{      num = num +"";       var re =/(-?\d+)(\d{3})/       while(re.test(num)){          num =num.replace(re,"$1,$2")       }   }    return num;}/** * 去除千分位 *@param{Object}num */function delcommafy(num){   if((num+"").trim()==""){      return"";   }   num=num.replace(/,/gi,'');   return num;}

0 0

JQ、JS 自动给文本框的数字加千分位(带format-number插件)

demo演示地址请点击 http://www.lovewebgames.com/jsmodule/format-number.html

演示代码

JQ、JS　自动给文本框的数字加千分位(带format-number插件)