今天遇到个业务需求，要求输入框，输入数字的小数位数可以很多位，但移开后显示，只显示小数点后两位 （四舍五入），当要编辑的时候，展现其原来的输入数据。
闲话不多说，当时也考虑用第三方插件，但感觉对现有框架后台数据取值有影响；
感觉还是前端处理下，直接采用两个input 一个用来显示四舍五入，一个用来存真实的值，
然后就是焦点移进移出的事件了，移进去控制真实input显示，移出来触发四舍五入的显示，当然这两个input得保持在同一位置上，定位好了就行。
思路出来了，就开始撸代码了！
1 <body> 2 <table> 3 <tr> 4 <td> 5 <input type="text" onblur="ConvertToShow(this);" /> 6 7 <input type="text" value="" onfocus="ShowToConvert(this);" /> 8 </td> 9 </tr> 10 <tr> 11 <td> 12 <input type="text" onblur="ConvertToShow(this);" /> 13 14 <input type="text" value="" onfocus="ShowToConvert(this);" /> 15 </td> 16 </tr> 17 </table> 18 <script src="http://www.likecs.com/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>