javascript 虚拟数字键盘

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

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

 

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,//允许输入数字长度

            });

预览：