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

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;

}



  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值