来源：https://www.bbsmax.com/A/E35prpDyzv/
/**
* 数字键盘插件 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
.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;
}
使用
<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>
}
浙公网安备 33010602011771号