jquery虚拟数字键盘

来源：https://www.bbsmax.com/A/E35prpDyzv/

/**
 * 数字键盘插件 js
 */

//匿名函数
(function ($) {

    var _count = 0;
    //定义一个 Mynumkb 类，构造函数传入参数：element, options
    var Mynumkb = function (element, options) {
        _count++;
        this.count = _count;
        this.$element = $(element);
        this.$element.attr("data-count", this.count);
        //jQuery.extend(object);
        //为扩展jQuery类本身添加新的方法。例如：$('input').mynumkb();
        //将两个或更多对象的内容合并到第一个对象。

        //jQuery.fn.extend(object); 给jQuery对象添加方法。

        //合并 defaults 和 options 对象，到第一个对象{}中，并返回新对象，
        //不修改 defaults 和 options 对象。
        this.options = $.extend({}, $.fn.mynumkb.defaults, options);

        this.init();    
    }

    Mynumkb.prototype = {
        constructor: Mynumkb,
        init: function () {
            var me = this;
            me.render();
            me.bind();
            me.initHtml();
        },
        render: function () {
            var me = this;
            me.$eparentNode = me.$element.parent();
        },
        bind: function () {
            var me = this;
            //文本框点击事件，调出数字键盘
            me.$element.on("click", $.proxy(me['_eClick'], me));
            //按压效果
            $(document).on("mousedown", "#mykeyboard" + me.count + " li", $.proxy(me['_limousedown'], me));
            $(document).on("mouseup", "#mykeyboard" + me.count + " li", $.proxy(me['_limouseup'], me));
            //
            $(document).on("click", "#mykeyboard" + me.count + " li", $.proxy(me['_liclick'], me));
        },
        initHtml: function () {
            var me = this;
            var _html = [
                '<div class="mykb-box" id="mykeyboard' + me.count + '">',
                '<ul class="num-key">',
                '<li class="num">1</li>',
                '<li class="num">2</li>',
                '<li class="num">3</li>',
                '<li class="func clearall">清除</li>',
                '<li class="num">4</li>',
                '<li class="num">5</li>',
                '<li class="num">6</li>',
                '<li class="func del">退格</li>',
                '<li class="num">7</li>',
                '<li class="num">8</li>',
                '<li class="num">9</li>',
                '<li class="func exit">关闭</li>',
                '<li class="num">0</li>',
                '<li class="num">00</li>',
                '<li class="num">.</li>',
                '<li class="func sure">确定</li>',
                '</ul>',
                '</div>',
            ].join("");

            $("body").append(_html);
            me.setPosition();
        },
        setPosition: function () {
            //自动计算位置，靠近文本框。
            //var me = this;
            //var parentNode = me.$eparentNode;
            //var $element = me.$element;
            //$("body").css("position", "relative");
            //var height = $element.outerHeight();
            //var width = $element.outerWidth();
            //var position = $element.position();
            //var $keyboard = $("#mykeyboard" + me.count);
            //var ulWidth = $keyboard.outerWidth();
            //var ulHeight = $keyboard.outerHeight();
            //var left = position.left;
            //$keyboard.css({
            //    top: position.top + height + 30 + "px",
            //    left: left + width + 30 + "px"
            //});
        },
        _eClick: function (e) {
            //文本框点击事件，显示当前文本框的数字键盘，隐藏其他文本框的数字键盘。
            var me = this;
            var count = me.$element.data("count");
            var $keyboard = $("#mykeyboard" + count);
            $keyboard.show();
            $keyboard.siblings(".mykb-box").hide();
        },
        _liclick: function (e) {
            //设置文本框的值
            var me = this;//当前插件对象
            var $target = $(e.target);//触发事件的元素 (li)
            if ($target.hasClass("del")) {//退格
                me.setValue("del");
            } else if ($target.hasClass("exit")) {
                //退出
                me.close();
            } else if ($target.hasClass("sure")) {
                //确定
                //判断是否有回调函数，若有，则把文本值回传。
                if (me.options.callback) {
                    //var confirmText = me.$element.val();
                    me.options.callback();
                }
                //关闭虚拟键盘
                //me.close();
            }
            else if ($target.hasClass("clearall")) {
                //清除
                me.$element.val("");
            } else {
                //输入其他数字
                var str = $target.text();
                me.setValue("add", str);
            }
        },
        _limousedown: function (e) {
            //数字键盘 鼠标按压效果
            var me = this;
            var val = $(e.target).html();
            $(e.target).addClass("active").siblings().removeClass("active");
        },
        _limouseup: function (e) {
            //数字键盘 移除鼠标按压效果
            var me = this;
            var val = $(e.target).html();
            $(e.target).removeClass("active");
        },
        testNum: function (str) {
            return /^[0-9]*(\.[0-9]{0,2})?$/.test(str);
        },
        setValue: function (type, str) {
            var me = this;
            var curpos = me.getCursorPosition();
            var val = me.$element.val();
            var newstr = "";
            if (type == 'add') {
                newstr = me.insertstr(val, str, curpos);
                var isnum = me.testNum(newstr);
                if (isnum) {
                    me.$element.val(newstr);
                    me.$element.textFocus(newstr.length);
                    me.$element.removeClass("error_num");
                }
                else {
                    //不是数字
                    me.$element.removeClass("error_num");
                    me.$element.addClass("error_num");
                }
            } else if (type == 'del') {
                newstr = me.delstr(val, curpos);
                var isnum = me.testNum(newstr);
                if (isnum) {
                    me.$element.val(newstr);
                    me.$element.textFocus(curpos - 1);
                    me.$element.removeClass("error_num");
                }
                else {
                    //不是数字
                    me.$element.removeClass("error_num");
                    me.$element.addClass("error_num");
                }
            }
        },
        insertstr: function (str, insertstr, pos) {
            var str = str.toString();
            var newstr = str.substr(0, pos) + '' + insertstr + '' + str.substr(pos);
            return newstr;
        },
        delstr: function (str, pos) {
            var str = str.toString();
            var newstr = "";
            if (pos != 0) {
                newstr = str.substr(0, pos - 1) + str.substr(pos);
            } else {
                newstr = str;
            }
            return newstr;
        },
        getCursorPosition: function () {
            var me = this;
            var $element = me.$element[0];
            var cursurPosition = -1;
            if ($element.selectionStart != undefined && $element.selectionStart != null) {
                //非IE浏览器
                cursurPosition = $element.selectionStart;
            } else {//IE
                var range = document.selection.createRange();
                range.moveStart("character", -$element.value.length);
                cursurPosition = range.text.length;
            }
            return cursurPosition;
        },
        close: function () {
            var me = this;
            var count = me.$element.data("count");
            var $keyboard = $("#mykeyboard" + count);
            $keyboard.fadeOut(100);
            me.$element.attr("isshowkb", "false");
        }
    };
    $.fn.mynumkb = function (option) {
        return this.each(function () {
            var options = typeof option == 'object' ? option : {};
            var data = new Mynumkb(this, options);
        })
    }
    $.fn.mynumkb.defaults = {

    };
    $.fn.mynumkb.Constructor = Mynumkb;

    //把焦点重设在输入的文本的指定的位置
    $.fn.textFocus = function (v) {
        var range, len, v = v === undefined ? 0 : parseInt(v);
        this.each(function () {
            if (navigator.userAgent.msie) {
                range = this.createTextRange();
                v === 0 ? range.collapse(false) : range.move("character", v);
                range.select();
            } else {
                len = this.value.length;
                v === 0 ? this.setSelectionRange(len, len) : this.setSelectionRange(v, v);
            }
            this.focus();
        });
        return this;
    }

})(jQuery);

function target_input_onkeyup(e) {
    //e.value 新值，e.value2 旧值
    //if (e.value == e.value2) {
    //    return;
    //}
    //限制只能输入4位
    //if (e.value.search(/^\d{0,4}$/) == -1) {
    //    e.value = (e.value2) ? e.value2 : '';
    //} else {
    //    e.value2 = e.value;
    //}
}

 css

.clearfix:after {
    /*visibility: hidden;
    display: block;
    font-size:;
    content: " ";
    clear: both;
    height:;*/
}

.num-key {
    padding: 0;
    margin: 0;
}

.mykb-box {
    width: 340px;
    height: 310px;
    /**阴影效果*/
    /*background: rgba(0,0,0,0.6);
    box-shadow: 0 0 10px rgb(43, 42, 42);*/
    padding: 3px;
    border-radius: 10px;
    position: fixed;
    right: 10px;
    bottom: 10px;
    display: none;
}

    .mykb-box ul, .mykb-box li {
        list-style: none;
    }

    .mykb-box li {
        width: 70px;
        height: 70px;
        line-height: 70px;
        text-align: center;
        background: #0074be; /**#f5f5f5*/
        border-radius: 10px;
        font-weight: bold;
        margin: 3px;
        float: left;
        box-shadow: 0px 2px 1px #000;
        color: #FFFFFF;
        font-size: 24px;
        cursor: pointer;
    }

        .mykb-box li.active {
            box-shadow: 0px -2px 1px #000;
        }

    .mykb-box .func {
        color: #fff;
        width: 100px;
    }

    .mykb-box .exit {
        background: #F44336;
    }

    .mykb-box .del {
        background: #0074be; /**#ff9800*/
    }

    .mykb-box .clearall {
        background: #0074be; /**#2196F3*/
    }

    .mykb-box .sure {
        background: #f08018; /**#4CAF50*/
        /*width: 176px;*/
    }

.error_num {
    color: #ff9800;
}

　　使用

<input type="text" id="txtNum1" readonly="readonly" onkeypress="return (/[\d.]/.test(String.fromCharCode(event.keyCode)))" placeholder="请输入正整数" />

<input type="text" id="txtNum2" readonly="readonly" onkeypress="return (/[\d.]/.test(String.fromCharCode(event.keyCode)))" placeholder="请输入正整数" />

@section Scripts{
    <link href="~/plugins/keyboard/numkeyboard.css" rel="stylesheet" />
    <script src="~/plugins/keyboard/numkeyboard.js"></script>
    <script>
        $(function () {
            //$("#txtNum1").mynumkb({ callback: confirm_callback });
            //$("#txtNum2").mynumkb({ callback: confirm_callback });

            $("input:text").mynumkb({ callback: confirm_callback });

            //不行：checkbox
            //$("input").mynumkb({ callback: confirm_callback });
        });

        //回调函数
        function confirm_callback() {
            alert("data:" + $('#txtNum1').val() + "/" + $('#txtNum2').val());
        }
    </script>
}