模拟数字键盘插件 mynumkb.js

由于项目需要，找到了个模拟数字键盘的插件。感觉挺好用的，为了避免以后肯有再用到的时候，特意保存一下。

• 优势：能针对光标位置进行增加或者退格操作，基本符合日常使用
• 演示地址
• 使用方式 ：引入jq和mynumkb.js后直接针对输入框调用$("input").mynumkb()
• 作者源码，含个人调整（注：个人修改的两处部分源码中已做注释）

(function ($) {
        var _count = 0;
        var Mynumkb = function (element, options) {
            _count++;
            this.count = _count;
            this.$element = $(element);
            this.$element.attr("data-count", this.count);
            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 + " button", $.proxy(me['_liclick'], me));
            },
            // 注：改动一，此处为插件创建数字板，有需要自定义的话可以注释掉，只需要保持内部的id，class类名一致即可。如mykeyboard、del、sure等。
            initHtml: function () {
                var me = this;
                // var _html = ['<div class="mykb-box" id="mykeyboard' + me.count + '">', '<ul class="num-key clearfix">', '<li class="num">1</li>', '<li class="num">2</li>', '<li class="num">3</li>', '<li class="func exit">退出</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 clearall">清除</li>', '<li class="num">0</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.fadeIn(100).siblings(".mykb-box").hide();
            },
            _liclick: function (e) {
                var me = this;
                var $target = $(e.target);
                if ($target.hasClass("del")) {
                    me.setValue("del");
                } else if ($target.hasClass("exit") || $target.hasClass("sure")) {
                    // me.close();
                    sure();
                } else if ($target.hasClass("clearall")) {
                    me.$element.val("");
                    me.setValue("del");
                } 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");
            },
            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);
                    me.$element.val(newstr);
                      // 注：改动二，此处为添加数字内容后的光标定位，由于项目键盘存在00键。所以添加内容后光标位置需与内容长度一致
                    me.$element.textFocus(curpos + str.length);
                } else if (type == 'del') {
                    newstr = me.delstr(val, curpos);
                    me.$element.val(newstr);
                    me.$element.textFocus(curpos - 1);
                }
            },
            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) {
                    cursurPosition = $element.selectionStart;
                } else {
                    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;
    }
)(jQuery);
(function ($) {
        $.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);