input框輸入金額顯示千分位

好比輸入：1000000，則顯示爲1,000,000（或者是保留3位小數：1,000,000.000）

知識點:

1）JavaScript parseFloat() 函數：

定義：parseFloat() 函數可解析一個字符串，並返回一個浮點數

語法：parseFloat(string)

　　a）parseFloat 將它的字符串參數解析成爲浮點數並返回；

　　b）若是在解析過程當中遇到了正負號（+ 或 -）、數字 (0-9)、小數點，或者科學記數法中的指數（e 或 E）之外

的字符，則它會忽略該字符以及以後的全部字符，返回當前已經解析到的浮點數；

　　c）參數字符串首位的空白符會被忽略；

注意：若是參數字符串的第一個字符不能被解析成爲數字，則 parseFloat 返回 NaN。

提示：您能夠經過調用 isNaN 函數來判斷 parseFloat 的返回結果是不是 NaN。若是讓 NaN 做爲了任意數學運算的操做數，則運算結果一定也是 NaN。

1 parseFloat("10")                10
2 parseFloat("10.00")             10
3 parseFloat("10.33")             10.33
4 parseFloat("34 45 66")          34
5 parseFloat("   60   ")          60
6 parseFloat("40 years")          40
7 isNaN(parseFloat("40 years"))   false
8 parseFloat("He was 40") NaN 9 isNaN(parseFloat("He was 40"))  true

2）JavaScript toFixed() 方法：

定義：toFixed() 方法可把 Number 四捨五入爲指定小數位數的數字。

語法：NumberObject.toFixed(num)，num參數必需，規定小數的位數，是 0 ~ 20 之間的值，包括 0 和 20，有些實

現能夠支持更大的數值範圍。若是省略了該參數，將用 0 代替。

以下：把數字舍入爲僅有一位小數的數字：

1 var num =13.36; 2 alert(num.toFixed(1));    13.4

3）JavaScript isNaN() 函數：

定義：isNaN() 函數用於檢查其參數是不是非數字值。

語法：isNaN(x)，若是 x 是特殊的非數字值 NaN（或者能被轉換爲這樣的值），返回的值就是 true。若是 x 是其餘值,則返回 false，前提條件：x不能爲空。

提示：isNaN() 函數一般用於檢測 parseFloat() 和 parseInt() 的結果，以判斷它們表示的是不是合法的數字。固然也能夠用 isNaN() 函數來檢測算數錯誤，好比用 0 做除數的狀況

4）JavaScript reverse() 方法：

定義：reverse() 方法用於顛倒數組中元素的順序

語法：array.reverse()

5）JavaScript split() 方法：

定義：split() 方法用於把一個字符串分割成字符串數組

語法：stringObject.split(separator,howmany)

　　參數separator：必需。字符串或正則表達式，從該參數指定的地方分割 stringObject；

　　參數howmany：可選。該參數可指定返回的數組的最大長度。若是設置了該參數，返回的子串不會多於這個參數指定的數組。若是沒有設置該參數，整個字符串都會被分割，不考慮它的長度；

註釋：若是把空字符串 ("") 用做 separator，那麼 stringObject 中的每一個字符之間都會被分割。

註釋：String.split() 執行的操做與 Array.join 執行的操做是相反的

寶典在這

 

6）JavaScript join() 方法：

定義：join() 方法用於把數組中的全部元素放入一個字符串

語法：arrayObject.join(separator)

　　參數separator：可選。指定要使用的分隔符。若是省略該參數，則使用逗號做爲分隔符。

提示：join("")則意味將數組拼接成字符串

 

需求：

input框輸入金額，要求按千分位顯示並四捨五入且保留3位小數，其中要求只能輸入大於的0的數字，小數位不做限制

分析：

一、四捨五入且保留指定小數位：toFixed() 方法

二、輸入大於0的數字且輸入時小數位不作限制：正則表達式校驗

　　1）正整數部分（>0整數）：[1-9][0-9]*　　表示以1-9任意一個數開頭，*表示出現0次或屢次；

　　2）含小數部分（注意不能是0.0000...）：[0]\.[0-9]{0,2}[1-9]\d*|[1-9][0-9]*\.\d*　　表示整數位0的小數保留3位四捨五入後不能是0.000，整數不爲0的均可以

三、整數部分加千分位：

　　1）先把通過toFixed()處理後，利用split(".")將整數和小數分開並分包存儲；

　　 2）整數部分加千分位：能夠從低位→高位，每隔3位插入逗號，還有注意最高位不能以逗號開頭；

　　　　2.1）利用split("")將整數部分切割成數組；

　　　　2.2）利用reverse()將切割後數組顛倒；

　　　　2.3）遍歷數組：數組下標+1和3求餘（數組下標從0開始）來從新拼接字符串或者push給新數組；

　　　　2.4）再利用reverse()顛倒新數組，利用join("")拼接；

四、字符串拼接：整數部分加千分位+"."+小數部分;

<input class="base-form-input " id="mny" type="text" onchange="numChange(this.value)" value="<fmt:formatNumber type='number' value='' pattern="#,##0.000" maxFractionDigits='3'/>">

javaScript腳本（紅色部分須要根據狀況修改）

//光標離開輸入的金額四捨五入並保留3位小數
    $("#mny").blur(function(){//輸入obj=123456.7890
        var obj = this.value; var mnyReg = /^([1-9][0-9]*|(([0]\.[0-9]{0,2}[1-9]\d*|[1-9][0-9]*\.\d*)))$/;//根據需求修改 if(!(mnyReg.test(obj))){ layer.tips("請輸入正確的資金", $(this).attr("id"),{time:1000}); return; } var n = 3; //保留得小數位
        obj = parseFloat(obj).toFixed(n); //obj=123456.789
        var left = obj.split(".")[0].split("").reverse();//left = ["6","5","4","3","2","1"]
        var right = obj.split(".")[1]; //right = "789"
        var total = new Array(); for (i = 0; i < left.length; i++) { total.push(left[i]); if((i + 1) % 3 == 0 && (i + 1) != left.length){ total.push(","); } } //total = ["6","5","4",",","3","2","1"]
        $("#mny").val(total.reverse().join("") + "." + right); })

//光標進入，去除金額千分位，並去除小數後面多餘的0
$("#mny").focus(function(){ var oldMny = this.value.replace(/,/g, ''); if(oldMny.indexOf(".")>0){ oldMny = oldMny.replace(/0+?$/,"");//去除尾部多餘的0 oldMny = oldMny.replace(/[.]$/,"");//若是最後一位是.則去掉 } this.value = oldMny; })

取值進行保存操做的時候，要把千分位去掉：能夠用全局匹配替換逗號

var reg_mny = $("#mny").val().trim().replace(/,/g, '');

 

若是想光標再次進入的時候顯示原先輸入的值，能夠再方法外面定義一個變量var oldMny，存儲輸入的金額：

當光標進入時候，取oldMny賦值給input（最原始的未四捨五入的值）；光標離開時候，則把input值存到oldMny；