html 输入金额,input框输入金额完美交互

交互内容：

输入前显示“0.00”

移入后如果是“0.00”则清空内容

移入后如果是“*.00”则去除后面的“.00”以方便填写

移入后如果是“*.*0”则优化成“*.*”，即去掉最后面的“0”以方便填写

什么都没写移出后又再次填充“0.00”

只能输入数字和小数点

仅能输入一个小数点

仅保留后面两个小数点

1

2 金额(元)

3

4

5

6

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

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

来源：https://www.cnblogs.com/kousuke/p/perfect-input-for-money.html