首页 > 代码库 > input框输入金额完美交互

input框输入金额完美交互

2024-09-14 08:41:26   214人阅读

交互内容：

输入前显示“0.00”
移入后如果是“0.00”则清空内容
移入后如果是“*.00”则去除后面的“.00”以方便填写
移入后如果是“*.*0”则优化成“*.*”，即去掉最后面的“0”以方便填写
什么都没写移出后又再次填充“0.00”
只能输入数字和小数点
仅能输入一个小数点
仅保留后面两个小数点

 1 <div class="mui-input-row"> 2     <label>金额<span>(元)</span></label> 3     <input type="tel" class="capital mui-input-clear" value="0.00"> 4 </div> 5  6 <style> 7 *{ 8     font-family:‘microsoft yahei‘; 9     height:30px;10     line-height:30px;11 }12 input{13     width:100px;14     border-radius:.3em;15     border:1px solid #ccc;16     padding-left:.5em;17     margin-left:.3em;18 }19 </style>20 21 <script>22 /*投资本金仅能输入数字和小数点*/23 var precapital;24 document.querySelector(‘.capital‘).addEventListener(‘focus‘, function() {25     if (this.value == ‘0.00‘) {26         this.value = ‘‘;27     } else {28         this.value = this.value.replace(/\.00/, ‘‘).replace(/(\.\d)0/,‘$1‘);29     }30     precapital = this.value;31 });32 document.querySelector(‘.capital‘).addEventListener(‘keyup‘, function() {33 34     this.value = this.value.replace(/^[\.]/, ‘‘).replace(/[^\d.]/g, ‘‘);35     if (this.value.split(".").length - 1 > 1) {36         this.value = precapital;37     }38     precapital = this.value;39 });40 document.querySelector(‘.capital‘).addEventListener(‘blur‘, function() {41     this.value = this.value.replace(/[\.]$/, ‘‘);42     this.value = Number(this.value).toFixed(2);43 });44 </script>

 

<iframe style="width: 100%;" title="Perfect input for money test1" src="http://codepen.io/kousuke/embed/GWYPPe/?height=265&theme-id=light&default-tab=js,result&embed-version=2" frameborder="no" scrolling="no" width="320" height="265"></iframe>

请使用手机"扫一扫"x

input框输入金额完美交互


联系
我们