jquery虚拟数字键盘

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258

/**  * 数字键盘插件 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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77

.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; }

　　使用

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<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> }