先上效果：
js直接应用： $('input').mynumkb(); 就出来效果
HTML:
<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="请输入正整数" >
CSS:
<style>.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}.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>
JS：
/*** 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{//IEvar 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);
