最后生成样子：
配置值：
* back {function} 回调函数
* msghtml {html} 自定义的html
* title {string|object} 标题
* {txt:标题，back:后退按钮}
* 字符串则只有标题，有back字段对象则有后退按钮
* sum {int} 输入的数字长度
* close {string} 关闭按钮的class类（有默认类名）
* cancel {string} 撤销重新输入按钮
js
function ztkeyboard(options){
let create = function(){
this.options = {
'msghtml':options.msghtml||'',
'title':options.title||'',
'sum':options.sum,
'close':$(options.close)||'',
'cancel':$(options.cancel)||'',
};
this.init();
this.show();
this.click();
this.close();
this.delete();
};
create.prototype.init = () => {
let pd='';//密码长度
let keybord = '';//键盘按键
for(var i=0;i<options.sum;i++){
pd += `<span class="pd fl" dataval="">*</span>`;
};
for(var i=0;i<9;i++){
keybord+= `<div class="fl key"><a class="btn" href="javascript:;">${i+1}</a></div>`
}
$('body').append(
`<div id="keyboard-box" style='display:none'>
<div id="keyboard">
<div class="title">
<em class="fl back iconfont ${options.close}"></em>
<span class="tit-txt">
${options.title}
</span>
</div>
<div class="con-box fn-clear">
${pd}
</div>
${options.msghtml}
<div class="keybord fn-clear">
${keybord}
<div class="fl block"></div>
<div class="fl key"><a class="btn" href="javascript:;">0</a></div>
<div class="fl key close-keybord">
<a href="javascript:;" class="iconfont ${options.cancel}"></a>
</div>
</div>
</div>
</div>
`
);
// 防止冒泡
$('#keyboard-box').on('touchmove',function(e){
e.preventDefault();
})
};
// 键盘点击
create.prototype.click = () => {
$(".keybord .btn").on('click',function(){
let index = $('.pd.fl.sure').index();
let aim = $('.pd.fl.sure').length;
if(index!=-1&&aim<`${options.sum}`){
$('.pd.fl').eq(aim).addClass('sure').attr('val',this.text);
if(aim==`${options.sum}`-1){
let password = '';
$('.pd.fl').each(function(i,datas){
password+=$(datas).attr('val');
})
create.prototype.back(password);//使用回调
$('#keyboard-box').fadeOut(500,function(){
$('#keyboard-box').remove();//清除元素
});
}
}else if(index==-1){
$('.pd.fl').eq(0).addClass('sure').attr('val',this.text);
}
})
};
//撤销按钮
create.prototype.delete = () => {
$('.close-keybord .iconfont').on('click',function(){
let aim = $('.pd.fl.sure').length;
$('.pd.fl').eq(aim-1).removeClass('sure').attr('val','');
})
};
// 显示对象
create.prototype.show = () => {
$('#keyboard-box').fadeIn(500);
}
// 取消对象创建
create.prototype.close = () => {
$('#keyboard .title .back').on('click',function(){
$('#keyboard-box').fadeOut(100,function(){
$('#keyboard-box').remove();//清除元素
});
})
},
// 回调函数(传递输入的密码给前台)
create.prototype.back = (password) => {
typeof(options.back)==="function"?options.back(password):'undefined';
};
return new create();
}
html调用方法
ztkeyboard({
msghtml:'<a class="forget-pwd" href="">忘记密码?</a>',
title:'请输入支付密码',
close:'icon-houtui',
sum:6,
cancel:'icon-chexiao',
back:function(data){
console.log(data)
console.log('提交支付密码表单')
}
})
css(less)
@r:75rem;
@basecolor:#51d392;
/* 方法库 */
@import url("http://at.alicdn.com/t/font_903282_qp1m330oew.css");
#keyboard-box{
position: fixed;
display: block;
width: 100%;
left:;
top:;
height: 100%;
background-color: rgba(0,0,0,0.2);
#keyboard{
position: absolute;
bottom:;
width: 100%;
height: 880/@r;
left:;
background-color: #fff;
.title{
line-height: 92/@r;
border-bottom: 1px solid #cacaca;
position: relative;
box-sizing: border-box;
.fl{
position: absolute;
font-size:34/@r;
color: #939395;
padding-left: 40/@r;
}
.tit-txt{
font-size: 38/@r;
color: #333;
text-align: center;
display: block; }
}
.con-box{
margin: 48/@r 32/@r 0 32/@r;
display:flex;
height: 94/@r;
border: 1px solid #a2a2a4;
border-radius: 10/@r;
.pd{
flex-grow:;
text-align: center;
font-size: 60/@r;
line-height: 94/@r;
color: #fff;
}
.pd:not(:last-child){
border-right: 1px solid #a2a2a4;
}
.pd.sure{
flex-grow:;
text-align: center;
font-size: 60/@r;
line-height: 94/@r;
color: #333;
}
}
.forget-pwd{
margin-top: 36/@r;
margin-bottom: 150/@r;
color: #0e8fe2;
display: block;
text-align: center;
}
.keybord{
padding: 12/@r 12/@r 4/@r 12/@r;
background-color: #d0d3da;
.fl{
width: 33%;
height: 92/@r;
display: inline-block;
text-align: center;
color: #333;
padding-bottom: 12/@r;
line-height: 92/@r;
cursor: pointer;
font-size:40/@r;
}
.btn{
display: block;
border-radius: 10/@r;
height: 92/@r;
line-height: 92/@r;
background-color: #fff;
margin: 0 6/@r;
color: #333;
box-shadow: 0px 10/@r 10/@r #88878c;
}
.close-keybord .iconfont{
color: #333;
font-size:60/@r;
display: block;
}
}
}
}