自定义键盘

注：本文需要引如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();