1. 程式人生 > >JS-滑鼠移出input,保留兩位小數且新增千分位分隔符

JS-滑鼠移出input,保留兩位小數且新增千分位分隔符

程式碼如下:

滑鼠移出input後保留兩位小數,新增千分位分隔符<input class="credit" type="text" value="0.00"/>

<script type="text/javascript">
//千分位的分隔符
function toThousands(num) {
	//若沒有任何資料則直接返回
	if(num == "" || num == null){
		return num;
	}else{
		//判斷是否有小數點
		var s = num.indexOf(".");
		if(s == -1){//是整數
			return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
		}else{
			 var arr = num.split(".");
			 return (arr[0] || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + "." + arr[1];
		}
	}
}
//小數點的校驗
$(function(){
	$(".credit").on('keyup', function (event) {
	    var $amountInput = $(this);
	    //響應滑鼠事件,允許左右方向鍵移動 
	    event = window.event || event;
	    if (event.keyCode == 37 | event.keyCode == 39) {
	        return;
	    }
	    //先把非數字的都替換掉,除了數字和. 
	    var temp = $amountInput.val().replace(/[^\d.-]/g, "").
	        //只允許一個小數點              
	        replace(/^\./g, "").replace(/\.{2,}/g, ".").
	        //只能輸入小數點後兩位
	        replace(".", "$#$").replace(/\./g, "").replace("$#$", ".").replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
	    //新增分隔符     
		$amountInput.val(toThousands(temp));
	});
	//滑鼠移出事件
	$(".credit").on('blur', function () {
	    var $amountInput = $(this);
	    //最後一位是小數點的話,移除
	    $amountInput.val(($amountInput.val().replace(/\.$/g, "")));
	    //保留兩位小數
	    var s = $amountInput.val();
	    var arr = s.split(".");
	    if(s == ""){
	    	 $amountInput.val("0.00");
	    	 return;
	    }else if(arr.length == 1){//沒有小數點
	    	$amountInput.val(s + ".00");
	    	return;
	    }else if(arr.length > 1 && arr[1].length < 2){//有小數點
	    	$amountInput.val(s + "0");
	    	return;
	    }
	});
}); 
</script>