javascript 虚拟数字键盘

浏览数：28 / 时间：2015年06月08日

最近项目业务需要，做个微信支付类似的数字虚拟键盘，自己做了一个。

适应手机任何尺寸，高度封装。

js:

    
define([], function () {
        
    /*
        param: {
            onFinish: function (){},
            onChange: funciton (){},
            maxLength: number
        }

    */

    var template =[
    ‘<ul class="keyboard J_Vertual-keyboard">‘,
    ‘<li class="J_Function-key J_Number">1</li>‘,
    ‘<li class="J_Function-key J_Number">2</li>‘,
    ‘<li class="J_Function-key J_Number">3</li>‘,
    ‘<li class="J_Function-key J_Number">4</li>‘,
    ‘<li class="J_Function-key J_Number">5</li>‘,
    ‘<li class="J_Function-key J_Number">6</li>‘,
    ‘<li class="J_Function-key J_Number">7</li>‘,
    ‘<li class="J_Function-key J_Number">8</li>‘,
    ‘<li class="J_Function-key J_Number">9</li>‘,
    ‘<li class="bgc2">&nbsp;</li>‘,
    ‘<li class="J_Function-key J_Number">0</li>‘,
    ‘<li class="J_Delete bgc2 J_Function-key delete"></li>‘,
    ‘</ul>‘
    ].join(‘‘);

    var VertualKeyBoard = function (param) {
        this._onFinish = param.onFinish;
        this._onChange = param.onChange;
        this._maxLength = param.maxLength || 6;

        this._vKeyboard = $(template);
        this._vKeyboardBtns = this._vKeyboard.find("li");
        this._inputedNum = [];
        this._init();
    }
    
    VertualKeyBoard.prototype = {
        _init: function (){
            this._bindEvent();
        },
        _onFinish: function () {/*abstract function*/ },
        _onChange: function () {/*abstract function*/ },
        _putNum: function (num) {
            num = parseInt(num);
            if (this._inputedNum.length < this._maxLength) {
                this._inputedNum.push(num);
                this._onChange(this._inputedNum);
                if (this._inputedNum.length == this._maxLength) {
                    this._onFinish();
                }
            }
        },
        _delNum: function (){
            if(this._inputedNum.length > 0){
                this._inputedNum.length = this._inputedNum.length - 1;
                this._onChange(this._inputedNum);
            }
        },
        _bindEvent: function (){
            var that = this;
            this._vKeyboard.on(‘click‘, function (e) {
                var $this = $(this);
                var $t = $(e.target);
                if ($t.hasClass("J_Function-key")) {
                    if ($t.hasClass("J_Number")) {
                        that._putNum($t.html());
                    } else if ($t.hasClass("J_Delete")) {
                        that._delNum();
                    }
                }
               
            })
        },
        getTemplate: function (){
            return this._vKeyboard;
        },
        getValue: function () {
            //for inputed num maybe is begin with zero, so return string.
            return this._inputedNum.length > 0 ? this._inputedNum.join("") : null;
        },
        clean: function () {
            this._inputedNum.length = 0;
        }
    }
    
    return VertualKeyBoard;
});

css: 自己可以改

.keyboard{ position:absolute; bottom:0; width:100%; background:#fff;line-height:50px;  }
.keyboard li{ text-align: center; width:33.33%; float:left;border:1px solid #cfcfcf;border-bottom:0;border-left:0; box-sizing:border-box; }
.keyboard li:nth-child(3n){border-right:0;}
.keyboard li:active {background:#eee;}

调用:　

var virtualKeyBoard = new VirtualKeyBoard({
                onFinish: function(){},//输入完成
                onChange: function (){},//有改变
                maxLength: number,//允许输入数字长度
            });

预览：　