實現輸入框小數多 自動進位展示，編輯時實際值不變
阿新 • • 發佈：2018-12-31
今天遇到個業務需求，要求輸入框，輸入數字的小數位數可以很多位，但移開後顯示，只顯示小數點後兩位 （四捨五入），當要編輯的時候，展現其原來的輸入資料。
閒話不多說，當時也考慮用第三方外掛，但感覺對現有框架後臺資料取值有影響；
感覺還是前端處理下，直接採用兩個input 一個用來顯示四捨五入，一個用來存真實的值，
然後就是焦點移進移出的事件了，移進去控制真實input顯示，移出來觸發四捨五入的顯示，當然這兩個input得保持在同一位置上，定位好了就行。
思路出來了，就開始擼程式碼了！
1 <body>
2 <table>
3 <tr>
4 <td style="position: relative;">
5 <input type="text" style="position: absolute;" class="TrueShow" onblur="ConvertToShow(this);" />
6
7 <input type="text" style="display:none;" class="FalseShow" value="" onfocus="ShowToConvert(this);" />
8 </td>
9 </tr>
10 <tr>
11 <td style="position: relative;">
12 <input type="text" style=" position: absolute;" class="TrueShow" onblur="ConvertToShow(this);" />
13
14 <input type="text" style="display:none;" class="FalseShow" value="" onfocus="ShowToConvert(this);" />
15 </td>
16 </tr>
17 </table>
18 <script src="jquery-1.12.4.js"></script>
19 <script type="text/javascript">
20 function ConvertToShow(obj) {
21 obj.setAttribute("style", "display:none");
22 var FalseShow = $(obj).parent().find(".FalseShow");
23 FalseShow.css("display", "block");
24 if (obj.value == "" || obj.value == null) {
25 FalseShow.val(obj.value);
26 } else {
27 var showVal = parseFloat(obj.value || 0);
28 showVal = showVal.toFixed(2);
29 FalseShow.val(showVal);
30 }
31
32 }
33 function ShowToConvert(obj) {
34 obj.setAttribute("style", "display:none;width:95%");
35 var TrueShow = $(obj).parent().find(".TrueShow");
36 TrueShow.css('display', 'block');
37 TrueShow.css('width', '95%');
38 TrueShow.focus();
39 }
40 </script>
41 </body>