首页 > > 网页制作 > css >

实现输入框小数多自动进位展示，编辑时实际值不…

2018-06-27 09:03:59来源：博客园阅读 ()

今天遇到个业务需求，要求输入框，输入数字的小数位数可以很多位，但移开后显示，只显示小数点后两位（四舍五入），当要编辑的时候，展现其原来的输入数据。

闲话不多说，当时也考虑用第三方插件，但感觉对现有框架后台数据取值有影响；

感觉还是前端处理下，直接采用两个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>