移動端開發，H5對number輸入框的一些處理

時間 2019-11-10

標籤移動開發 h5 number 輸入一些處理欄目無線简体版

原文原文鏈接

最近H5開發，用到了金額輸入框，可是又沒有定製金額鍵盤，因此就用type="number"調用系統的數字鍵盤。javascript

需求須要，用戶是不能輸入除數字覺得其它的內容的，金額最多隻能輸入到小數點後的兩位，。css

因此研究了一些，number鍵盤，當用戶輸入非數字時，取到的value爲空，可是輸入框展示的仍是用戶所輸入的內容。html

例如：用戶輸入a，渠道的value 爲空，可是輸入框展示的爲a；特例（當用戶輸入2.時，取到的值爲2，輸入框展示爲2.）java

<!DOCTYPE html>
<html>
<head>
<title>demo5</title>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<style type="text/css">
</style>
</head>
<!-- 禁用複製 ，除去一些沒必要要的因素 -->
<body onpaste="return false">
    <div><input type='number' id = 'number'></div>
</body>
<script type="text/javascript">
    var me = window;
    (function init(){
        me.number = getId('number');
        me.n = '';
        initEvent();
        
        function initEvent(){
            me.number.addEventListener('keyup', number, false);
        }
        function getId(id){
            return document.getElementById(id);
        }
        function number(){//金額，
            console.log(this.value);
            if(this.value == ''){//校驗，用戶輸入後，輸入框的值是否爲數字，當不爲數字時，取到的爲空
                this.value='';
                this.value = me.n;
                return
            }
            if(!/^\d{0,9}\.{0,1}(\d{1,2})?$/.test(this.value)){//校驗不超過兩位小數
                this.value = me.n;
            }
            if(window.event.keyCode != 8){
                if(this.value%1==0 && me.n==this.value){//當用戶按下非刪除鍵時，新值和舊值相同,舊值爲整數
                    return
                }
                if(me.n.indexOf(".")>-1 && me.n==this.value){//當用戶按下非刪除鍵時，新值和舊值相同,舊值爲小數
                    this.value='';
                    this.value = me.n;
                    return
                }
            }else{
                if(me.n.indexOf(".")>-1 && this.value.indexOf(".")<0){//當按下刪除時，刪掉小數點時
                    me.n = this.value;
                    return
                }
            }
            me.n = this.value
            if(me.n.indexOf(".")>0){
                this.value = me.n;
            }
        }
    }())

</script>
</html>