自定义键盘

注：本文需要引如Jquery1.17+
// HTML
<div class="layer flex_cc">
<div class="key_store">
<input class="num_input" readonly />
<div class="key_num_box flex_acw">
<div class="key_num">1</div>
<div class="key_num">2</div>
<div class="key_num">3</div>
<div class="key_num">4</div>
<div class="key_num">5</div>
<div class="key_num">6</div>
<div class="key_num">7</div>
<div class="key_num">8</div>
<div class="key_num">9</div>
<div class="key_del key_button">删除</div>
<div class="key_num">0</div>
<div class="key_sure key_button">确定</div>
</div>
</div>
</div>
// CSS
.flex_acw{
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
.flex_ccc{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
/*键盘*/
.layer{
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background: rgba(0,0,0,.4);
z-index: 100;
}
.key_store{
width: 3.5rem;
padding: .2rem .2rem .1rem .2rem;
/*height: 90%;*/
background: url(../img/background_layer.png) no-repeat;
background-size: 100% 100%;
background-position: center center;
text-align: center;
}
.num_input{
display: block;
width: 100%;
height: .6rem;
line-height: .6rem;
padding-left: .4rem;
margin-bottom: .1rem;
font-size: .22rem;
color: #848484;
background: url(../img/display.png) no-repeat;
background-size: 90% 100%;
background-position: center;
border: none;
outline: none;
}
.key_num_box div{
width: .8rem;
height: .8rem;
line-height: .8rem;
margin-bottom: .1rem;
font-size: .5rem;
text-align: center;
color: #848484;
background: url(../img/button.png) no-repeat;
background-size: 100% 100%;
background-position: center center;
}
.key_num_box .key_button{
font-size: .22rem;
}
// JS
var withdrawals = {};
withdrawals.keyDwon = function () {
var num_val = '',
inp;//确认点击的是哪一个input
// 数字输入
function tipNum () {
console.log('j',$(this).text())
var tip_val = $(this).text();
num_val += tip_val;
$('.num_input').val(num_val);
}
// 删除
function delVal () {
var val = $('.num_input').val(),
idx = val.length -1,
end_val = val.substr(0,val.length -1);
$('.num_input').val(end_val);
num_val = end_val;
}
// 确定
function sure () {
inp.val(num_val);
$('.layer').hide();
// 清空键盘展示框
num_val = '';
$('.num_input').val(num_val);
}
function showKeyLayer () {
inp = $(this);
$('.layer')[0].style.display = 'flex';
// 保留输入框信息到键盘展示框中
if ($(this).val()) {
num_val = $(this).val();
$('.num_input').val($(this).val())
} else {
num_val = '';
$('.num_input').val('');
}
$('.key_num').off('click').on('click',tipNum);
$('.key_del').off('click').on('click',delVal);
$('.key_sure').off('click').on('click',sure);
}
$('.inp_num').focus(showKeyLayer);
}
withdrawals.keyDwon();