这个事css干不了吧,怎么也得用上js。
css只能改变显示的样子,在Dom中做改动得用js了
js代码拿去用:
function number_format(number, decimals, dec_point, thousands_sep) {/*
* 参数说明:
* number:要格式化的数字
* decimals:保留几位小数
* dec_point:小数点符号
* thousands_sep:千分位符号
* */
number = (number + '').replace(/[^0-9+-Ee.]/g, '')
var n = !isFinite(+number) ? 0 : +number,
prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
s = '',
toFixedFix = function (n, prec) {
var k = Math.pow(10, prec)
return '' + Math.ceil(n * k) / k
}
s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.')
var re = /(-?\d+)(\d{3})/
while (re.test(s[0])) {
s[0] = s[0].replace(re, "$1" + sep + "$2")
}
if ((s[1] || '').length < prec) {
s[1] = s[1] || ''
s[1] += new Array(prec - s[1].length + 1).join('0')
}
return s.join(dec)
}
使用方法:
var num=number_format(1234567.089, 2, ".", ",")//1,234,567.09<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><!--引入jquery库--><style>
* {margin:0padding:0}
.parentCls {margin:0position:relative}
.inputElem {height:24px border:1px solid #ddd outline:none }
#fixval {position:absolute top:-35px left:0 display:none border:1px solid #ddd background:#fff font-size:18px font-weight:bold color:#F60 padding:5px }
</style>
<div style="height:50px"></div>
<div class="parentCls">
<input type="text" class="inputElem" autocomplete = "off" maxlength="18"/>
<div id="fixval"></div>
</div>
<script>
$(function(){
$(".inputElem").keyup(function(event){
var txt = $(this).val()
var keyCode = event.which
if ( txt.length<=0 ) {
$("#fixval").hide()
}else{
if ( $.isNumeric(txt) !== true || keyCode==32 ){//判断输入类型,并去除空格
$(this).val( txt.slice(0,-1) ) //截掉非数字和空格
return false
}
var re=/(?=(?!\b)(\d{3})+$)/g //分割数字 1,000
txt = txt.replace(re,",")
$("#fixval").html(txt).show()
}
})
})
</script>