大不忍则乱小谋，自定义键盘

js代码

// 全局变量
var Global_type, Global_show, Global_safe, Global_count = 0;

(function ($) {
    $.fn.KeyBoard = function (options) {

        // 默认配置
        var defaults = {
            random: false, // 随机键盘
            type: "idcard", // 密码 password or 金额 money 身份证 idcard
            show: "", // 展示区域
            safe: false // 加密显示
        }
        options = $.extend(defaults, options);

        return this.each(function () {
            Global_type = defaults.type;
            Global_show = defaults.show;
            Global_safe = defaults.safe;

            var keyboard = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];

            if (defaults.random) {
                // 生成0-9随机排列组合
                function randomsort(a, b) {
                    return Math.random() > .5 ? -1 : 1;
                }
                var keyboard = keyboard.sort(randomsort);
            }

            $(this).append("<div class=\"row\"><div class=\"col-xs-9 keyboard-numBtn\"></div><div class=\"col-xs-3 keyboard-operation\"></div></div>");
            $(this).find(".keyboard-numBtn").append("<div class=\"row row_1\"></div><div class=\"row row_2\"></div><div class=\"row row_3\"></div><div class=\"row row_4\"></div>");
            $(this).find(".keyboard-operation").append("<div class=\"row row_1\"></div><div class=\"row row_2\">");

            // 生成数字按钮
            for (var i = 0; i < keyboard.length + 2; i++) {
                var btn_list = "<div class=\"col-xs-4\" οnclick=\"selectBtn('" + keyboard[i] + "')\">" + keyboard[i] + "</div>";
                // console.log(i)
                if (i <= 2) {
                    $(this).find(".keyboard-numBtn").find(".row_1").append(btn_list);
                } else if (i >= 3 && i <= 5) {
                    $(this).find(".keyboard-numBtn").find(".row_2").append(btn_list);
                } else if (i >= 6 && i <= 8) {
                    $(this).find(".keyboard-numBtn").find(".row_3").append(btn_list);
                } else {
                    if (i == 9) {
                        btn_list = "<div class=\"col-xs-4\"><!--<i class=\"iconfont\">&#xe60e;隐藏</i>--></div>";
                    } else if (i == 11) {
                        if (defaults.type == "idcard") {
                            // 身份证X按钮
                            btn_list = "<div class=\"col-xs-4\" οnclick=\"selectBtn(\'X\')\">X</div>";
                        } else if (defaults.type == "password"){
                            btn_list = "<div class=\"col-xs-4\">.</div>";
                        }else {
                            btn_list = "<div class=\"col-xs-4\" οnclick=\"selectBtn(\'.\')\">.</div>";
                        }
                    } else if (i == 10) {
                        btn_list = "<div class=\"col-xs-4\" οnclick=\"selectBtn('" + keyboard[9] + "')\">" + keyboard[9] + "</div>";
                    }
                    $(this).find(".keyboard-numBtn").find(".row_4").append(btn_list);
                }


            }

            // 生成删除和确定按钮
            $(this).find(".keyboard-operation").find(".row_1").append("<div class=\"col-xs-12 keyboard-operation-delete\" οnclick=\"deleteBtn()\"><i class=\"iconfont\">&#xe620;</i></div>");
            if (defaults.type == "password") {
                $(this).find(".keyboard-operation").find(".row_2").append("<div class=\"col-xs-12 keyboard-operation-submit\" οnclick=\"submitBtn()\">确定</div>");
            }else if (defaults.type == "idcard"){
                $(this).find(".keyboard-operation").find(".row_2").append("<div class=\"col-xs-12 keyboard-operation-submit\" οnclick=\"hiddenKeyboard()\">确定</div>");
            } else {
                $(this).find(".keyboard-operation").find(".row_2").append("<div class=\"col-xs-12 keyboard-operation-submit\" οnclick=\"submitBtn()\">支付</div>");
            }

            // 生成展示框
            if (defaults.type == "money") {
                defaults.show.html('<input type="text" class="keyboard-input-text input_ keyboard-password" disabled>');
            }else if (defaults.type == "idcard") {
                defaults.show.html('<input type="text" class="keyboard-input-text input_ keyboard-password" placeholder="请输入办卡人证件号" disabled>' );
            } else {
                defaults.show.append('<input type="text" class="keyboard-input-text input_ keyboard-password hidden" disabled>');
                for (var j = 1; j <= 6; j++) {
                    var str = '<input type="text" class="keyboard-input-text input_' + j + ' keyboard-money" disabled>'
                    defaults.show.append(str);
                }
            }
            
            // 显示键盘
            Global_show.on("click", function () {
                $('.keyboard-box').removeClass('animated fadeOutDownBig');
                $('.keyboard-box').addClass('animated fadeInUpBig');
            })
        });
    };
})(jQuery);

// 输入
function selectBtn(text) {
    var _input = Global_show.find(".input_")
    var _value = _input.val();
    var _id_input = $(".keyboard-show-text");


    if (Global_type == "money") {
        // 点只能输入一次
        if (text == '.') {
            if (_value.indexOf(".") >= 1) {
                return false;
            }
        }
        // 第一位如果是0的话
        if (_value == '0' && text != '.') {
            _value = '';
        }
        // 第一位如果是.的话
        if (!_value && text == '.') {
            _value = '0';
        }
        _value += text;
        _input.val(_value);
    } else if (Global_type == "idcard"){

        if (_value.length >= 18) {
            layer.msg("身份证最多18位")
            return  false;
        }
        // X只能输入一次
        if (text == 'X') {
            if (_value.indexOf("X") >= 0) {
                console.log(_value);
                layer.msg("只能有一位X")
                return false;
            }
        }
        _value += text;
        _input.val(_value);
        _id_input.val(_value);
    }else {
        // 密码不超过6位
        if (Global_count < 6) {
            Global_count = Global_count + 1;
            _value += text;
            _input.val(_value);
            if (Global_safe) {
                Global_show.find(".input_" + Global_count).val("·");
            } else {
                Global_show.find(".input_" + Global_count).val(_value.slice(Global_count - 1, Global_count));
            }
        }
    }
};

// 删除
function deleteBtn() {
    var val = "";
    var len = (Global_show.find(".input_").val()).length;

    if (len > 1) {
        val = (Global_show.find(".input_").val()).substring(0, len - 1);
    }
    Global_show.find(".input_").val(val);

    if (Global_type == "password" && Global_count > 0) {
        Global_show.find(".input_" + Global_count).val("");

        Global_count = Global_count - 1;
        console.log("123")
        console.log(Global_count)
    }
};

// 隐藏键盘
function hiddenKeyboard() {

    if ($('.keyboard-box').hasClass('animated fadeOutDownBig')) {
        $('.keyboard-box').removeClass('animated fadeOutDownBig');
        $('.keyboard-box').addClass('animated fadeInUpBig');
    } else {
        $('.keyboard-box').removeClass('animated fadeInUpBig');
        $('.keyboard-box').addClass('animated fadeOutDownBig');
    }
};

// 支付或确认
function submitBtn() {
    console.log(Global_show.find(".input_").val());
};

css代码

@font-face {
    font-family: 'iconfont';
    /* project id 756210 */
    src: url('http://at.alicdn.com/t/font_756210_jdp01lae4h.eot');
    src: url('http://at.alicdn.com/t/font_756210_jdp01lae4h.eot?#iefix') format('embedded-opentype'), url('http://at.alicdn.com/t/font_756210_jdp01lae4h.woff') format('woff'), url('http://at.alicdn.com/t/font_756210_jdp01lae4h.ttf') format('truetype'), url('http://at.alicdn.com/t/font_756210_jdp01lae4h.svg#iconfont') format('svg');
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 1.2rem;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

.keyboard-box {
    background: #fff;
    font-size: 18px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

.keyboard-box i {
    font-size: 24px;
}

.keyboard-numBtn .row .col-xs-4,
.keyboard-operation .row_1 .col-xs-12 {
    border-top: 1px solid #ddd;
    text-align: center;
    height: 2.5rem;
    line-height: 1rem;
    padding: 15px;
}

.keyboard-numBtn .row .col-xs-4 {
    border-right: 1px solid #ddd;
}

.keyboard-operation .row_2 .col-xs-12 {
    border-top: 1px solid #ddd;
    text-align: center;
    color: #fff;
    height: 7.5rem;
    line-height: 7.5rem;
}

.keyboard-operation-submit {
    background: #13ae13;
}

.keyboard-show-text {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    /*margin-top: 30px;*/
}

.keyboard-show-text input[disabled] {
    background: transparent;
    border: none;
    opacity: 1;
    /*color: #333;*/
    /*-webkit-text-fill-color: #333;*/
}

.keyboard-money,
.keyboard-password {
    /*padding: 15px;*/
    /*text-align: right;*/
    /*font-size: 20px;*/
    /*font-weight: 600;*/
}

.keyboard-money {
    width: 15%;
    border: 1px solid #ddd !important;
    margin: 0 -1px 0 0;
}

.keyboard-password {
    width: 100%;
    /*border-bottom: 1px solid #ddd !important;*/
}

<!-- 使用非input 标签 -->
<dd class="keyboard-show-text"></dd>
                
<!-- 自定义键盘 -->
<!--动画css-->
<link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css" rel="stylesheet">

<link rel="stylesheet" href="__CDN__/assets/js/keyboard/keyboard.css">
<div class="container-fluid">
    <div class="keyboard-box animated fadeOutDownBig"></div>
</div>
<script src="__CDN__/assets/js/keyboard/keyboard.js"></script>
<script type="text/javascript">
    $(".keyboard-box").KeyBoard({
        random: false, // 随机键盘
        type: "idcard", // 密码 password or 金额 money 身份证 idcard
        show: $(".keyboard-show-text"), // 展示区域
        safe: false // 加密显示
    });


</script>

效果图