您的位置：首页 > Web前端 > JavaScript

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

2015-08-13 11:17 645 查看
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;

}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航