实现输入框小数多 自动进位展示，编辑时实际值不变
生活随笔
收集整理的這篇文章主要介紹了
实现输入框小数多 自动进位展示，编辑时实际值不变
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
今天遇到個業務需求，要求輸入框，輸入數字的小數位數可以很多位，但移開后顯示，只顯示小數點后兩位 （四舍五入），當要編輯的時候，展現其原來的輸入數據。
閑話不多說，當時也考慮用第三方插件，但感覺對現有框架后臺數據取值有影響；
感覺還是前端處理下，直接采用兩個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>?
本文轉載于:猿2048?https://www.mk2048.com/blog/blog.php?id=1khbjib&title=實現輸入框小數多 自動進位展示，編輯時實際值不變
總結
以上是生活随笔為你收集整理的实现输入框小数多 自动进位展示，编辑时实际值不变的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS染色图标（图片）
- 下一篇： 课时109.外边距合并现象（掌握）