input框輸入金額完美交互

交互內容：

輸入前顯示“0.00”
移入后如果是“0.00”則清空內容
移入后如果是“*.00”則去除后面的“.00”以方便填寫
移入后如果是“*.*0”則優化成“*.*”，即去掉最后面的“0”以方便填寫
什么都沒寫移出后又再次填充“0.00”
只能輸入數字和小數點
僅能輸入一個小數點
僅保留后面兩個小數點

<div class="mui-input-row">
    <label>金額<span>(元)</span></label>
    <input type="tel" class="capital mui-input-clear" value="0.00">
</div>

<style>
*{
    font-family:'microsoft yahei';
    height:30px;
    line-height:30px;
}
input{
    width:100px;
    border-radius:.3em;
    border:1px solid #ccc;
    padding-left:.5em;
    margin-left:.3em;
}
</style>

 js部分：

/*投資本金僅能輸入數字和小數點*/
var precapital;
document.querySelector('.capital').addEventListener('focus', function() {
    if (this.value == '0.00') {
        this.value = '';
    } else {
        this.value = this.value.replace(/\.00/, '').replace(/(\.\d)0/,'$1');
    }
    precapital = this.value;
});
document.querySelector('.capital').addEventListener('keyup', function() {

    this.value = this.value.replace(/^[\.]/, '').replace(/[^\d.]/g, '');
    if (this.value.split(".").length - 1 > 1) {
        this.value = precapital;
    }
    precapital = this.value;
});
document.querySelector('.capital').addEventListener('blur', function() {
    this.value = this.value.replace(/[\.]$/, '');
    this.value = this.value.replace(/(.*)\.([\d]{2})(\d*)/g,'$1.$2');
    this.value = Number(this.value).toFixed(2);
    var logNum = this.value.toString();
    if(logNum.match(/\./g) != null){
        integerNum = parseInt(logNum).toString().replace(/\d(?=(\d{3})+$)/g,'$&,');
        decimalNum = '.' + logNum.replace(/(.*)\.(.*)/g,'$2');
        document.querySelector(".logbox").innerHTML = integerNum+decimalNum;
    }else{
        document.querySelector(".logbox").innerHTML = logNum.replace(/\d(?=(\d{3})+$)/g,'$&,');
    }
});

請使用手機"掃一掃"x