先上效果：
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{//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);