number框

由於系統的number框沒法設置樣式，因此休息無聊時寫了一個簡單的模擬number框的插件，效果不是很完善，有一些功能可能沒注意到

 

// 簡單的模擬number框插件
// 佈局:
//     <div class="number">
//             <input type="text"/>
//             <i>-</i><i>+</i>
//    </div>
// 使用時進行將上方佈局放入要使用number框的位置,而後自行設置CSS樣式
    // 使用方法：$(".number").number();

;(function($){
    "use strict";
    class Number{
        constructor(ele) {
            this.input=ele.find("input");
            this.ai=ele.find("i");
            this.div=ele;
            this.input();
            this.key();
            this.calculation();
            return {num:this.input.val()};
        }
　　　　//輸入控制，限制輸入的爲數值或者小數點
        input(){
            var that=this;
            this.input.on("input",function(){
                that.input.val(that.input.val().replace(/[^\d-+\.]/g,'');
            })
        }
　　　　//按鍵加減功能的實現
        key(){
            var that=this;
            this.input.on("keydown",function(){
                var e=event;
                var keyC=e.keyCode;
                if(keyC==38){
                    e.preventDefault();
                }
                if(keyC==38||keyC==40)
               　　 if(isNaN(that.input.value/1)){
                  　　  that.input.val(0);
               　　 }
                switch(keyC){
                    case 38:that.input.val(that.input.val()-0+1); break;
                    case 40:that.input.val()--;break;
                }
            });
        }
　　　　//加與減按鈕的功能實現
        calculation(){
            this.ai.eq(1).click(()=>{
                this.input.focus();
                if(isNaN(this.input.val()/1))
                    this.input.val(1);
                this.input.val(this.input.val()-0+1);
            })
            this.ai.eq(0).click(()=>{
                this.input.focus();
                if(isNaN(this.input.val()/1))
                    this.input.val(1);
                if(this.input.val()<=1){
                    this.input.val(1);
                })
                this.input.val()--;
            }
        }    
            
            
            
                
    }
            
            
    // 綁定number方法
    $.fn.extend({
        number () {
            var d=new Number(this);
            return parseInt(d.num);
        } 
    });
})(jQuery);