input框輸入金額處理的解決辦法

最近已經上線的項目突然出現了input輸入金額刪除時出現問題，網上各種搜索都沒有搜到想要的，今天就以react框架為例子進行代碼奉獻，我會把需求及解決方法寫出來，希望對朋友們有用。

如有更好地實現方式歡迎指點！

一、需求

1、只允許輸入數字

2、只允許輸入一個小數點，且小數點只能有一個，后面最多可輸兩位小數

3、金額轉成大寫

4、控制金額輸入的位數

二、實現方法

 constructor中代碼：

constructor(props) {
       super();

        this.state = {
               saveMoney:' ' ,input框里的初始值
               bigText:' ',大寫金額
        };
         this.handleChangeSave= this.handleChangeSave.bind(this);
}


render中代碼：

<input type="text" id='box' 
    value={this.state.saveMoney}
    onChange={this.handleChangeSave} 
  />
<p className={styles.daxie}>{this.state.bigText}</p>

handleChangeSave方法： 
handleChangeSave(e) { 
大寫金額轉換方法： 

            function DX(n) {

                 var fraction = ['角', '分'];

                 var digit = ['零', '壹', '貳', '叄', '肆', '伍', '陸', '柒', '捌', '玖'];

                 var unit = [['元', '萬', '億'], ['', '拾', '佰', '仟']];

                 var head = n < 0 ? '欠' : '';

                 n = Math.abs(n);

                 var s = '';

                 for (var i = 0; i < fraction.length; i++) {

                 s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');

                    }

                 s = s || '整';

                 n = Math.floor(n);

                for (var i = 0; i < unit[0].length && n > 0; i++) {

                var p = '';

                for (var j = 0; j < unit[1].length && n > 0; j++) {

                p = digit[n % 10] + unit[1][j] + p;

                n = Math.floor(n / 10);

                  }

                s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;

                }

              return head + s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整');

             }

            const bigText= DX(num); 調用大寫方法


       獲取值並進行實時改變input框的數據顯示，進行位數控制
const data = e.target.value; 獲取輸入的值 
const num = data.replace(/,/g, '');把輸入的逗號變成空 

var reg = /^[0-9\.\d]+$/; 正則匹配輸入的是否符合規范 
if (reg.test(num)) 
 { if (num.indexOf('.') > '-1') 判斷小數點存在的情況下
 { const decimal = num.split('.')[1]; 
 const wholeNumber =num.split('.')[0]; 
 if(wholeNumber == ''){ 
 this.setState({ saveMoney: '0'+'.'+decimal, 如果小數點前為空的話默認為0 
 bigText：bigText });}
 else{ 
 if (num >= 1000 && decimal.length < 3&& num.length < 15) 
 { this.setState({ saveMoney: parseInt(num)+'.'+decimal, bigText：bigText }); }
 else if (num >= 0 && num < 1000 && decimal.length < 3) 
 { this.setState({ 
 saveMoney: parseInt(num)+'.'+decimal, 
 bigText：bigText }); } } } 
 else { if(num >= 0 && num.length < 12){ 判斷小數點不存在的情況下
 this.setState({ 
 saveMoney: num, 
 bigText：bigText }); } } } 
 else if (num == '') 判斷為空時
 { this.setState({ 
 saveMoney: '', 
 bigText：'' }); }}