JS数字键盘
  TEZNKK3IfmPf 2023年11月14日 27 0
js

JS数字键盘,JS小键盘

CSS代码:

JS数字键盘JS数字键盘

#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: 4px; /* Webkit browsers */
border-radius: 4px; /* W3C syntax 圆角 */
float: left;
height: 68px;
width: 68px;
border: solid 1px #b3b3b3;
margin-top: 1px;
margin-left: 1px;
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;
}

View Code

JS代码:

JS数字键盘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="" ></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 ><div id="numberkeyboard">' + numbtnhtml + '</div></div>');
$("#numberkeyboard").find(".numbtn").bind("mousedown", function () {
$(this).addClass("numbtndown");
});
$("#numberkeyboard").find(".numbtn").bind("mouseup", function () {
$(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);
}
else {
containerDiv.css("top", obj.offset().top + obj.height() + objpadding + 2 + 5);
}
}

$("#numberkeyboard").find(".numbtn").unbind("click");
$("#numberkeyboard").find(".numbtn").bind("click", function () {
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("");
break;
case "sign":
if (obj.val().length > 0) {
if (obj.val().substr(0, 1) == "-") {
obj.val(obj.val().substr(1, obj.val().length - 1));
}
else {
obj.val("-" + obj.val());
}
}
break;
case "close":
$("#numberkeyboard").find(".numbtn").unbind("click");
containerDiv.hide();
break;
default:
obj.val(obj.val() + key);
break;
}
});
}

View Code

样式图片(numbtn.png):

JS数字键盘

如何使用:

1、引用CSS和JS:

JS数字键盘JS数字键盘

<link type="text/css" href="https://www.ctyun.cn/portal/link.html?target=~%2FScripts%2FNumKey%2FNumKey.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript" src="~/Scripts/NumKey/NumKey.js"></script>

View Code

2、初始化:

JS数字键盘JS数字键盘

$(function () {
$("input[type='text']").click(function () {
loadNumberKeyboard(this);
});
});

View Code

3、效果图:

JS数字键盘

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

上一篇: WPF文字间距 下一篇: Java学习之逻辑运算符
  1. 分享:
最后一次编辑于 2023年11月14日 0

暂无评论

推荐阅读
  TEZNKK3IfmPf   2024年03月29日   77   0   0 标签js
  TEZNKK3IfmPf   2024年03月29日   20   0   0 js
  TEZNKK3IfmPf   2023年11月15日   27   0   0 ajaxjs
  TEZNKK3IfmPf   2023年11月15日   159   0   0 cssjshtml5
  TEZNKK3IfmPf   2023年11月15日   30   0   0 javajavascriptjs
  TEZNKK3IfmPf   2023年11月15日   58   0   0 htmljavajs
  TEZNKK3IfmPf   2023年11月15日   36   0   0 csshtmljs
  TEZNKK3IfmPf   2023年11月15日   31   0   0 csshtmljs
  TEZNKK3IfmPf   2023年11月15日   24   0   0 htmlvuejs
TEZNKK3IfmPf