欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-11 16:09:49
今天遇到个业务需求,要求输入框,输入数字的小数位数可以很多位,但移开后显示,只显示小数点后两位 (四舍五入),当要编辑的时候,展现其原来的输入数据。 闲话不多说,当时也考虑用第三方插件,但感觉对现有框架后台数据取值有影响; 感觉还是前端处理下,直接采用两个input 一个用来显示四舍五入,一个用来存 ......

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

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

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

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