<input maxlength="4" type="text" onkeyup="if (this.value==this.value2) return; if (this.value.search(/^\d{0,4}$/)==-1) this.value=(this.value2)?this.value2:'';else this.value2=this.value;" placeholder="请输入正整数" >

<style>

    .clearfix:after {

        visibility: hidden;

        display: block;

        font-size:;

        content: " ";

        clear: both;

        height:;

    }

    .mykb-box{

        width:390px;

        height:370px;

        background:rgba(0,0,0,0.6);

        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);

        box-shadow:0 0 10px rgb(43, 42, 42);

        padding:20px;

        border-radius:10px;

        user-select: none;

        -ms-user-select: none;

        position:absolute;

        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:#f5f5f5;

        border-radius:10px;

        font-weight:bold;

        margin:10px;

        float:left;

        box-shadow: 0px 2px 1px #000;

        color:#1b50a2;

        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:#ff9800}

    .mykb-box .clearall{background:#2196F3}

    .mykb-box .sure{background: #4CAF50;width:190px;}

</style>

/**

 * Created by on 2019/7/11.

 *

 * 数字键盘插件 js

 */

(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+" li",$.proxy(me['_liclick'],me));

        },

        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();

            }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");

        },

        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);

                me.$element.textFocus(curpos+1);

            }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){//非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;

})(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);