最近项目业务需要，做个微信支付类似的数字虚拟键盘，自己做了一个。
适应手机任何尺寸，高度封装。
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"> </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: 自己可以改
?
|
1 2 3 4 |
|
调用:
?
|
1 2 3 4 5 |
|
预览：
