input框输入金额完美交互

Posted 2020-09-10 诸葛小觉の博客

交互内容：

输入前显示“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>

 

请使用手机"扫一扫"x