input框输入金额完美交互 - 诸葛小觉

交互内容：

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

js部分：

 1 /*投资本金仅能输入数字和小数点*/
 2 var precapital;
 3 document.querySelector('.capital').addEventListener('focus', function() {
 4     if (this.value == '0.00') {
 5         this.value = '';
 6     } else {
 7         this.value = this.value.replace(/\.00/, '').replace(/(\.\d)0/,'$1');
 8     }
 9     precapital = this.value;
10 });
11 document.querySelector('.capital').addEventListener('keyup', function() {
12 
13     this.value = this.value.replace(/^[\.]/, '').replace(/[^\d.]/g, '');
14     if (this.value.split(".").length - 1 > 1) {
15         this.value = precapital;
16     }
17     precapital = this.value;
18 });
19 document.querySelector('.capital').addEventListener('blur', function() {
20     this.value = this.value.replace(/[\.]$/, '');
21     this.value = this.value.replace(/(.*)\.([\d]{2})(\d*)/g,'$1.$2');
22     this.value = Number(this.value).toFixed(2);
23     var logNum = this.value.toString();
24     if(logNum.match(/\./g) != null){
25         integerNum = parseInt(logNum).toString().replace(/\d(?=(\d{3})+$)/g,'$&,');
26         decimalNum = '.' + logNum.replace(/(.*)\.(.*)/g,'$2');
27         document.querySelector(".logbox").innerHTML = integerNum+decimalNum;
28     }else{
29         document.querySelector(".logbox").innerHTML = logNum.replace(/\d(?=(\d{3})+$)/g,'$&,');
30     }
31 });

请使用手机"扫一扫"x

posted on 2017-04-12 14:33 诸葛小觉阅读(14681) 评论(7) 收藏举报

刷新页面返回顶部