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

最新推荐文章于 2024-07-03 15:45:53 发布

南郭未末

最新推荐文章于 2024-07-03 15:45:53 发布

阅读量9k

点赞数 1

分类专栏： jquery html学习文章标签：千分位 input JQ javascript 数字与千分位数字互换

本文链接：https://blog.csdn.net/ybb350680013/article/details/47609629

版权

jquery 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

html学习

7 篇文章 0 订阅

订阅专栏

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;

}