1. 程式人生 > >實現輸入框小數多 自動進位展示,編輯時實際值不變

實現輸入框小數多 自動進位展示,編輯時實際值不變

今天遇到個業務需求,要求輸入框,輸入數字的小數位數可以很多位,但移開後顯示,只顯示小數點後兩位 (四捨五入),當要編輯的時候,展現其原來的輸入資料。

閒話不多說,當時也考慮用第三方外掛,但感覺對現有框架後臺資料取值有影響;

感覺還是前端處理下,直接採用兩個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>