js实现数字键盘
效果图:
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实现数字键盘的更多相关文章
- JS数字键盘
JS数字键盘,JS小键盘 CSS代码: #numberkeyboard { border: 1px solid #b3b3b3; background: #f2f3f7; height: 285px; ...
- js Date 函数方法 和 移动端数字键盘调用
var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-???? ...
- js输入密文弹出数字键盘
我们经常被产品要求,在移动端的web页面上的输入框输入密码时要弹出数字键盘,而不是全键盘,这个该怎么实现呢? 1.首先要弹出数字键盘,我们只能把input框的type从password改为tel 2. ...
- js实现软键盘
<p><img id="img" onclick="javascript:var s=document.createElement('script'); ...
- h5仿微信、支付宝数字键盘|微信支付键盘|支付宝付款键盘
html5仿微信支付数字键盘|仿支付宝键盘|h5仿微信密码输入键盘|自定义数字键盘 很早之前由于项目需求,就有开发过一个h5仿微信支付键盘,这几天就把之前的数字键盘模块独立出来,重新整理开发成demo ...
- 基于jQuery的数字键盘插件
有时,我们需要在网页上使用软键盘.今天,就给大家带来一个基于jQuery的数字键盘插件,除了jQuery,不需要依赖任何文件资源.纯数字键盘,有退格,有清除,不支持输入小数(需要的可以自己改一下,主要 ...
- 一个数字键盘引发的血案——移动端H5输入框、光标、数字键盘全假套件实现
https://juejin.im/post/5a44c5eef265da432d2868f6 为啥要写假键盘? 还是输入框.光标全假的假键盘? 手机自带的不用非得写个假的,吃饱没事干吧? 装逼?炫技 ...
- jQuery 虚拟数字键盘代码
先上效果: js直接应用: $('input').mynumkb(); 就出来效果 HTML: <input maxlength="4" type="tex ...
- 手机端访问web调用数字键盘。
转自 http://www.webkfa.com/one4/w1937.html 最近在做手机页面时,遇到数字输入的键盘的问题,之前的做法只是一刀切的使用 type="tel", ...
随机推荐
- Python 语言简介
Python是一种计算机程序设计语言.你可能已经听说过很多种流行的编程语言,比如非常难学的C语言,非常流行的Java语言,适合初学者的Basic语言,适合网页编程的JavaScript语言等等. 那P ...
- POJ 1789&&2485&&1258&&3026
这个真的太水了——MST专辑. 如果不会MST的两种算法的同学可以出门右转了. 大致讲一下,第一题我是用Prim+堆优化的(毕竟点比较多),后面三题用的是Kruskal(习惯打,而且并查集常数实在小) ...
- Source insight 中 标题栏路径显示完整路径的方法
在source insight 的标题栏中显示完整路径名的方法.Options -> Preferences -> Display -> Trim long path names w ...
- P问题,NP问题,NPC问题,NP-hard问题
1.P问题:一个问题能找到一个在多项式时间里解决他的算法 多项式时间(o(1),o(lgn),o(n的a次方)) 非多项式时间 o(a的n次方) o(n!) 2.NP问题:在多项式时间找不到问题的解 ...
- 记一次Java加密加签算法到php的坑
此文为本人原创首发于 http://www.35coder.com/convert_encryption_codes_to_php/. 写代码的经历中,总少不了与外部的程序对接,一旦有这样的事,往往周 ...
- Jq_input file标签上传图片到服务器
引入jQuery库引入ajaxfileupload.js上传插件库(这也是jQuery的一个插件)以ASP.NET为例 <input type="file" id=" ...
- SVN基础操作
SVN基础操作 安装 #大多数Linux版本自带svn svn --version #如果没有安装可用yum安装 yum install subversion 生命周期 创建版本库 检出 更新 执行变 ...
- 黄金分割点(第五周 c语言版)
在上一周,学习其他课程的同时,用C语言编写了黄金分割点小游戏.因为要做界面需要mfc,当时学的时候还做了个简单的计算器.目前c++的知识忘的差不多了,所以就先用C语言来实现算法.打算接下来的一周复习c ...
- jquery实现点击复制到剪切板
1.必须有先引入 jquery库 <script type="text/javascript" src="js/jquery.js"></sc ...
- input 清空值。(转载)
ref顾名思义我们知道,其实它就可以被看座是一个组件的参考,也可以说是一个标识.作为组件的属性,其属性值可以是一个字符串也可以是一个函数. 其实,ref的使用不是必须的.即使是在其适用的场景中也不是非 ...