JS数字键盘,JS小键盘
CSS代码:
#numberkeyboard { border: 1px solid #b3b3b3; background: #f2f3f7; height: 285px; margin: 0; padding: 2px; position: relative; visibility: visible !important; width: 285px; } #numberkeyboard .numbtn { -moz-border-radius: 4px; /* Gecko browsers */ -webkit-border-radius: Webkit browsers border-radius: W3C syntax 圆角 float: left; height: 68px; width: border: solid 1px #b3b3b3; margin-top: 1px; margin-left: font-family: Verdana,微软雅黑,雅黑; font-size: 22px; line-height: 69px; text-align: center; cursor: default; background-image: url(numbtn.png); background-position: -1px -1px; } #numberkeyboard .numbtn:hover { background-position: -1px -72px; } .numbtndown { background-position: -1px -143px !important; }
JS代码:
//小键盘 function loadNumberKeyboard(obj) { if ($("#numberkeyboard").length == 0) { var numbtnhtml = '<div class="numbtn" key="1">1</div><div class="numbtn" key="2">2</div><div class="numbtn" key="3">3</div><div class="numbtn" key="backspace">←</div><div class="numbtn" key="4">4</div><div class="numbtn" key="5">5</div><div class="numbtn" key="6">6</div><div class="numbtn" key="clear">清空</div><div class="numbtn" key="7">7</div><div class="numbtn" key="8">8</div><div class="numbtn" key="9">9</div><div class="numbtn" key="" style="visibility: hidden;"></div><div class="numbtn" key="sign">+/-</div><div class="numbtn" key="0">0</div><div class="numbtn" key=".">.</div><div class="numbtn" key="close">关闭</div>'; $("body").append('<div style="position: absolute; left: 0; top: 0; display: none;"><div id="numberkeyboard">' + numbtnhtml + '</div></div>'); $("#numberkeyboard").find(".numbtn").bind("mousedown", () { $(this).addClass("numbtndown"); }); $("#numberkeyboard").find(".numbtn").bind("mouseup",1)">this).removeClass("numbtndown"); }); } var containerDiv = $("#numberkeyboard").parent(); containerDiv.show(); containerDiv.css("z-index",9100); obj = $(obj); if (obj.attr("id")) { var objpadding = parseInt(obj.css("padding-top").replace("px","")) + parseInt(obj.css("padding-bottom").replace("px","")); if (obj.offset().left + 340 >= $(window).width()) { containerDiv.css("left",$(window).width() - 340); } else { containerDiv.css("left",obj.offset().left); } if (obj.offset().top + 291 + obj.height() + objpadding + 2 + 5 >= $(window).height() + $(window).scrollTop()) { containerDiv.css("top",obj.offset().top - 291 - 5 { containerDiv.css("top",obj.offset().top + obj.height() + objpadding + 2 + 5); } } $("#numberkeyboard").find(".numbtn").unbind("click"); $("#numberkeyboard").find(".numbtn").bind("click",1)"> () { obj.focus(); var key = $(this).attr("key"); switch (key) { case "backspace": if (obj.val().length > 0) { obj.val(obj.val().substr(0,obj.val().length - 1)); } break; case "clear": obj.val(""); case "sign") { if (obj.val().substr(0,1) == "-") { obj.val(obj.val().substr(1,1)">)); } { obj.val("-" + obj.val()); } } case "close": $("#numberkeyboard").find(".numbtn").unbind("click"); containerDiv.hide(); default: obj.val(obj.val() + key); ; } }); }
样式图片(numbtn.png):
如何使用:
1、引用CSS和JS:
<link type="text/css" href="~/Scripts/NumKey/NumKey.css" rel="stylesheet" /> script ="text/javascript" src="~/Scripts/jquery-1.8.2.js"></script> ="~/Scripts/NumKey/NumKey.js">
2、初始化:
$( () { $("input[type='text']").click( () { loadNumberKeyboard(this); }); });
3、效果图:
原文地址:https://www.cnblogs.com/s0611163
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。