自定義鍵盤

注：本文需要引如Jquery1+
// 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"></div>
            <div class="key_num"></div>
            <div class="key_num"></div>
            <div class="key_num"></div>
            <div class="key_num"></div>
            <div class="key_num"></div>
            <div class="key_num"></div>
            <div class="key_num"></div>
            <div class="key_num"></div>
            <div class="key_del key_button">删除</div>
            <div class="key_num"></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: ;
    left: ;
    display: none;
    width: %;
    height: %;
    background: rgba(,,,);
    z-index: ;
}
.key_store{
    width: rem;
    padding: rem rem rem rem;
    /*height: 90%;*/
    background: url(../img/background_layer.png) no-repeat;
    background-size: % %;
    background-position: center center; 
    text-align: center;
}
.num_input{
    display: block;
    width: %;
    height: rem;
    line-height: rem;
    padding-left: rem;
    margin-bottom: rem;
    font-size: rem;
    color: #;
    background: url(../img/display.png) no-repeat;
    background-size: % %;
    background-position: center;
    border: none;
    outline: none;
}
.key_num_box div{
    width: rem;
    height: rem;
    line-height: rem;
    margin-bottom: rem;
    font-size: rem;
    text-align: center;
    color: #;
    background: url(../img/button.png) no-repeat;
    background-size: % %;
    background-position: center center;
}
.key_num_box .key_button{
    font-size: rem;
}
// 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 -,
            end_val = val.substr(,val.length -);
        $('.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')[].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();