效果图:

1、引入jquery.js文件

2、css样式

<style type="text/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: 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(pics/numbtn.png);
background-position: -1px -1px;
} #numberkeyboard .numbtn:hover
{
background-position: -1px -72px;
} .numbtndown
{
background-position: -1px -143px !important;
} </style>

  3、js

<script type="text/javascript">
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", 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;
}
});
} $(function () {
$("input[type='number']").click(function () {
loadNumberKeyboard(this);
});
});
</script>

  4、html

<input id="inMoney" type="number" class="inmoney" value="" placeholder="请输入金额"></input>

  5、css样式中需要的背景图片(图片名称numbtn.png)可直接在本图点击右键保存

js实现数字键盘的更多相关文章

  1. JS数字键盘

    JS数字键盘,JS小键盘 CSS代码: #numberkeyboard { border: 1px solid #b3b3b3; background: #f2f3f7; height: 285px; ...

  2. js Date 函数方法 和 移动端数字键盘调用

    var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-???? ...

  3. js输入密文弹出数字键盘

    我们经常被产品要求,在移动端的web页面上的输入框输入密码时要弹出数字键盘,而不是全键盘,这个该怎么实现呢? 1.首先要弹出数字键盘,我们只能把input框的type从password改为tel 2. ...

  4. js实现软键盘

    <p><img id="img" onclick="javascript:var s=document.createElement('script'); ...

  5. h5仿微信、支付宝数字键盘|微信支付键盘|支付宝付款键盘

    html5仿微信支付数字键盘|仿支付宝键盘|h5仿微信密码输入键盘|自定义数字键盘 很早之前由于项目需求,就有开发过一个h5仿微信支付键盘,这几天就把之前的数字键盘模块独立出来,重新整理开发成demo ...

  6. 基于jQuery的数字键盘插件

    有时,我们需要在网页上使用软键盘.今天,就给大家带来一个基于jQuery的数字键盘插件,除了jQuery,不需要依赖任何文件资源.纯数字键盘,有退格,有清除,不支持输入小数(需要的可以自己改一下,主要 ...

  7. 一个数字键盘引发的血案——移动端H5输入框、光标、数字键盘全假套件实现

    https://juejin.im/post/5a44c5eef265da432d2868f6 为啥要写假键盘? 还是输入框.光标全假的假键盘? 手机自带的不用非得写个假的,吃饱没事干吧? 装逼?炫技 ...

  8. jQuery 虚拟数字键盘代码

    先上效果:    js直接应用:  $('input').mynumkb(); 就出来效果 HTML: <input maxlength="4" type="tex ...

  9. 手机端访问web调用数字键盘。

    转自  http://www.webkfa.com/one4/w1937.html 最近在做手机页面时,遇到数字输入的键盘的问题,之前的做法只是一刀切的使用 type="tel", ...

随机推荐

  1. Python 语言简介

    Python是一种计算机程序设计语言.你可能已经听说过很多种流行的编程语言,比如非常难学的C语言,非常流行的Java语言,适合初学者的Basic语言,适合网页编程的JavaScript语言等等. 那P ...

  2. POJ 1789&&2485&&1258&&3026

    这个真的太水了——MST专辑. 如果不会MST的两种算法的同学可以出门右转了. 大致讲一下,第一题我是用Prim+堆优化的(毕竟点比较多),后面三题用的是Kruskal(习惯打,而且并查集常数实在小) ...

  3. Source insight 中 标题栏路径显示完整路径的方法

    在source insight 的标题栏中显示完整路径名的方法.Options -> Preferences -> Display -> Trim long path names w ...

  4. P问题,NP问题,NPC问题,NP-hard问题

    1.P问题:一个问题能找到一个在多项式时间里解决他的算法 多项式时间(o(1),o(lgn),o(n的a次方)) 非多项式时间 o(a的n次方)  o(n!) 2.NP问题:在多项式时间找不到问题的解 ...

  5. 记一次Java加密加签算法到php的坑

    此文为本人原创首发于 http://www.35coder.com/convert_encryption_codes_to_php/. 写代码的经历中,总少不了与外部的程序对接,一旦有这样的事,往往周 ...

  6. Jq_input file标签上传图片到服务器

    引入jQuery库引入ajaxfileupload.js上传插件库(这也是jQuery的一个插件)以ASP.NET为例 <input type="file" id=" ...

  7. SVN基础操作

    SVN基础操作 安装 #大多数Linux版本自带svn svn --version #如果没有安装可用yum安装 yum install subversion 生命周期 创建版本库 检出 更新 执行变 ...

  8. 黄金分割点(第五周 c语言版)

    在上一周,学习其他课程的同时,用C语言编写了黄金分割点小游戏.因为要做界面需要mfc,当时学的时候还做了个简单的计算器.目前c++的知识忘的差不多了,所以就先用C语言来实现算法.打算接下来的一周复习c ...

  9. jquery实现点击复制到剪切板

    1.必须有先引入 jquery库 <script type="text/javascript" src="js/jquery.js"></sc ...

  10. input 清空值。(转载)

    ref顾名思义我们知道,其实它就可以被看座是一个组件的参考,也可以说是一个标识.作为组件的属性,其属性值可以是一个字符串也可以是一个函数. 其实,ref的使用不是必须的.即使是在其适用的场景中也不是非 ...