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", ...
随机推荐
- redis系列--redis4.0深入持久化
前言 在之前的博文中已经详细的介绍了redis4.0基础部分,并且在memcache和redis对比中提及redis提供可靠的数据持久化方案,而memcache没有数据持久化方案,本篇博文将详细介绍r ...
- 2017-2018-2 20155224 『网络对抗技术』Exp9:Web安全基础
实验完成情况 共完成11题 准备工作 在浏览器输入localhost:8080/WebGoat打开webgoat,左侧选择题目 右键选择Inspect Element开始调试 Injection Fl ...
- VS编程,WPF单独更改TextBlock中部分文字格式的一种方法
原文:VS编程,WPF单独更改TextBlock中部分文字格式的一种方法 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_43307934/articl ...
- [清华集训2015 Day1]玛里苟斯-[线性基]
Description Solution 考虑k=1的情况.假设所有数中,第i位为1的数的个数为x,则最后所有的子集异或结果中,第i位为1的个数为$(C_{k}^{1}+C_{k}^{3}+...)$ ...
- P2463 [SDOI2008]Sandy的卡片
写一种\(O(nm)\)的做法,也就是\(O(\sum 串长)\)的. 先通过差分转化,把每个数变成这个数与上一个数的差,第一个数去掉,答案就是最长公共子串+1 按照套路把所有串拼起来,中间加一个分隔 ...
- python中获取执行脚本路径方法
1.sys.path[0]:获取执行脚本目录绝对路径 #每次执行脚本时,python会将执行脚本目录加入PYTHONPATH环境变量中(sys.path获取) #!/usr/bin/python3 i ...
- 蓝牙学习笔记三(Android Debug)
android 端可以通过两种方式去Debug: 一.在手机的设置功能里,开发者模式 Enable,如下图: http://blog.bluetooth.com/debugging-bluetoo ...
- 设计模式 笔记 命令模式 Command
//---------------------------15/04/25---------------------------- //Conmmand 命令模式----对象行为型模式 /* 1:意 ...
- 通过IP来判断所在城市
1 今天的讲解什么? 如何根据ip查询出所在城市?我把博客园中收集的教程整理了一下,主要结合调用相关API,或者通过纯真数据库来解决这个问题. 2 相关介绍 2.1 这个是什么? 通过IP查询所在城 ...
- 容器flappybird游戏——图文操作指引贴
第一步:打开华为云容器引擎产品首页,点击免费体验馆 第二步:进入免费体验馆,点击体验按钮,获得3天免费集群 第三步:创建免费集群完成后,进入产品console页,如图所示: 第四步:如 ...