JavaScript + HTML 虚拟键盘效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
#in {
height: 40px;
width: 300px;
margin-right: auto;
margin-left: auto;
}
#key {
font-size: 25px;
line-height: 40px;
font-weight: bolder;
color: #FF0000;
height: 40px;
width: 300px;
border: 1px solid #FF9900;
}
div {
cursor: hand;
}
#box {
height: 200px;
width: 500px;
margin-top: 20px;
margin-right: auto;
margin-left: auto;
}
#b1 div {
font-size: 12px;
line-height: 20px;
color: #FFFFFF;
background-color: #FF9933;
text-align: center;
vertical-align: middle;
margin: 2px;
float: left;
height: 20px;
width: 25px;
}
#b2 div {
font-size: 12px;
line-height: 20px;
color: #FFFFFF;
background-color: #0066FF;
text-align: center;
vertical-align: middle;
margin: 2px;
float: left;
height: 20px;
width: 25px;
}
.cle {
clear: left;
margin: 0px;
height: 0px;
width: 0px;
}
#b3 div {
font-size: 12px;
line-height: 20px;
color: #FFFFFF;
background-color: #0066FF;
text-align: center;
vertical-align: middle;
margin: 2px;
height: 20px;
width: 25px;
float: left;
}
#b4 div {
font-size: 12px;
line-height: 20px;
color: #FFFFFF;
background-color: #0066FF;
text-align: center;
vertical-align: middle;
margin: 2px;
float: left;
height: 20px;
width: 25px;
}
-->
</style>
</head>
<script language="javascript" src="js/jquery-1.10.2.min.js"></script>
<script language="javascript">
var lock = false; function instr( str ){
if(lock){
srt = str.toUpperCase()
}
$("#key").val( $("#key").val() + str )
}
</script> <body>
<div id="in"><input id="key" name="key" type="password" readonly="readonly" />
</div>
<div id="box">
<div id="b1">
<div id="n0">0</div>
<div id="n1">1</div>
<div id="n2">2</div>
<div id="n3">3</div>
<div id="n4">4</div>
<div id="n5">5</div>
<div id="n6">6</div>
<div id="n7">7</div>
<div id="n8">8</div>
<div id="n9">9</div>
<div id="nd">.</div>
<div id="del">←</div>
<div class="cle"></div>
</div>
<div id="b2">
<div id="q">q</div>
<div id="w">w</div>
<div id="e">e</div>
<div id="r">r</div>
<div id="t">t</div>
<div id="y">y</div>
<div id="u">u</div>
<div id="i">i</div>
<div id="o">o</div>
<div id="p">p</div>
<div class="cle"></div>
</div>
<div id="b3">
<div id="cl">Caps</div>
<div id="a">a</div>
<div id="s">s</div>
<div id="d">d</div>
<div id="f">f</div>
<div id="g">g</div>
<div id="h">h</div>
<div id="j">j</div>
<div id="k">k</div>
<div id="l">l</div>
<div class="cle"></div>
</div>
<div id="b4">
<div id="z">z</div>
<div id="x">x</div>
<div id="c">c</div>
<div id="v">v</div>
<div id="b">b</div>
<div id="n">n</div>
<div id="m">m</div>
<div id="sp">sp</div> </div>
</div>
<script language="javascript"> $("#n0").on("click" , function(){
instr('0')
}) $("#n1").on("click" , function(){
instr('1')
}) $("#n2").on("click" , function(){
instr('2')
}) $("#n3").on("click" , function(){
instr('3')
}) $("#n4").on("click" , function(){
instr('4')
}) $("#n5").on("click" , function(){
instr('5')
}) $("#n6").on("click" , function(){
instr('6')
}) $("#n7").on("click" , function(){
instr('7')
}) $("#n8").on("click" , function(){
instr('8')
})
$("#n9").on("click" , function(){
instr('9')
})
$("#nd").on("click" , function(){
instr('.')
}) $("#q").on("click" , function(){
instr('q')
})
$("#w").on("click" , function(){
instr('w')
})
$("#e").on("click" , function(){
instr('e')
})
$("#r").on("click" , function(){
instr('r')
})
$("#t").on("click" , function(){
instr('t')
})
$("#y").on("click" , function(){
instr('y')
})
$("#u").on("click" , function(){
instr('u')
})
$("#i").on("click" , function(){
instr('i')
})
$("#o").on("click" , function(){
instr('o')
})
$("#p").on("click" , function(){
instr('p')
})
//<div id="cl">Caps</div> $("#a").on("click" , function(){
instr('a')
})
$("#s").on("click" , function(){
instr('s')
})
$("#d").on("click" , function(){
instr('d')
})
$("#f").on("click" , function(){
instr('f')
})
$("#g").on("click" , function(){
instr('g')
})
$("#h").on("click" , function(){
instr('h')
})
$("#j").on("click" , function(){
instr('j')
})
$("#k").on("click" , function(){
instr('k')
})
$("#l").on("click" , function(){
instr('l')
}) $("#z").on("click" , function(){
instr('z')
})
$("#x").on("click" , function(){
instr('x')
})
$("#c").on("click" , function(){
instr('c')
})
$("#v").on("click" , function(){
instr('v')
})
$("#b").on("click" , function(){
instr('b')
})
$("#n").on("click" , function(){
instr('n')
})
$("#m").on("click" , function(){
instr('m')
})
//<div id="sp">sp</div> $("#del").on("click" , function(){
var s = $("#key").val() //获取文本框的值
var s1
var i = 0
i = s.length - 1 //获取文本长度 -1
s1 = s.substr(0,i) //截取字符串s从 0位开始I个长度的字符 $("#key").val(s1) //将截取后的字符串 回写到文本框内
}) $("#cl").on("click" , function(){ if( lock ){
lock = false;
}else{
lock = true;
} if(lock){
$("div").css("text-transform","uppercase")
}else{
$("div").css("text-transform","none")
}
})
</script>
</body>
</html>
JavaScript + HTML 虚拟键盘效果的更多相关文章
- 普通键盘Windows上虚拟Cherry机械键盘效果的方法
草台班子--普通键盘Windows上虚拟Cherry机械键盘效果的方法 机械键盘以其独特的手感.绚丽的外形,还有那人神共愤的音效吸引着大批爱好者.最近iQQO 3的机械键盘效果更是吸引了更多 ...
- 039. asp.netWeb用户控件之七实现具有虚拟键盘的功能的用户控件
用户控件ascx代码: <%@ Control Language="C#" AutoEventWireup="true" CodeFile="K ...
- JS虚拟键盘
由于是触摸屏,所以需要一款JS虚拟键盘.上网找了一个好用的VirtualKeyboard,作了修改. 修改该插件参考的博客文章:http://www.cnblogs.com/xinggong/arch ...
- 重新想象 Windows 8 Store Apps (49) - 输入: 获取输入设备信息, 虚拟键盘, Tab 导航, Pointer, Tap, Drag, Drop
[源码下载] 重新想象 Windows 8 Store Apps (49) - 输入: 获取输入设备信息, 虚拟键盘, Tab 导航, Pointer, Tap, Drag, Drop 作者:weba ...
- 《Genesis-3D开源游戏引擎--横版格斗游戏制作教程08：虚拟键盘实现》--本系列完结
8.虚拟键盘实现 概述: 硬键盘就是物理键盘,平时敲的那种.软键盘是虚拟的键盘,不是在键盘上,而是在"屏幕"上.虚拟按键就是虚拟键盘的一部分,根据功能需求,提供部分按键效果的UI可 ...
- ios下虚拟键盘出现"搜索"字样
最近在开发过程中,发现用户输入想要检索的内容,弹出虚拟键盘,在安卓机上虚拟键盘最右下角会有‘搜索’字样,而ios上虚拟键盘最右下角只有‘换行’字样, 这样用户体验就会大打折扣. 安卓机上虚拟键盘 io ...
- 关于cocos2d-x 中 CCEditBox 的输入位置和IOS虚拟键盘位置不重合的bug
这个文章的名字起的实在是有点长,主要是怕说不清楚. 在IOS上,输入时,我看到过的比较少,就两种,如附件两张图.一个是虚拟键盘的输入框完全是在CCEditBox上,另一张虚拟键盘的输入区域是紧挨着键盘 ...
- 【转】iOS 上常用的两个功能：点击屏幕和return退出隐藏键盘和解决虚拟键盘挡住UITextField的方法
iOS上面对键盘的处理很不人性化,所以这些功能都需要自己来实现, 首先是点击return和屏幕隐藏键盘 这个首先引用双子座的博客 http://my.oschina.net/plumsoft/blog ...
- C# Winform制作虚拟键盘，支持中文
原文:C# Winform制作虚拟键盘,支持中文 最近在做一个虚拟键盘功能,代替鼠标键盘操作,效果如下: 实现思路: 1 构建中文-拼音 数据库, ...
随机推荐
- 使用HttpClient 4.3.4 自动登录并抓取中国联通用户基本信息和账单数据,GET/POST/Cookie
一.什么是HttpClient? HTTP 协议可能是现在 Internet 上使用得最多.最重要的协议了,越来越多的 Java 应用程序需要直接通过 HTTP 协议来访问网络资源.虽然在 JDK 的 ...
- win7+vs2010+opencv2.4.6配置
记录一下配置,省的以后还到处去找: (一) 添加环境变量://第一次使用opencv的话需要加环境变量:” %opencv%\build\x86\vc10\bin”和”%opencv%\build\c ...
- 强大的Spring缓存技术（中）
好,到目前为止,我们的 spring cache 缓存程序已经运行成功了,但是还不完美,因为还缺少一个重要的缓存管理逻辑:清空缓存. 当账号数据发生变更,那么必须要清空某个缓存,另外还需要定期的清空所 ...
- Tornado中Cookie过期问题
首先,web应用程序是使用HTTP协议进行数据传输,因为HTTP协议是无状态的,所以一旦提交数据完成后,客户端和服务器端的连接就会被关闭,再次进行数据的交换就得重新建立新的连接,那么,有个问题就是服务 ...
- javascript:void(0)
这是不是一个设计缺陷呢 void(0)这种用法巧妙利用void关键字的特性返回undefined(且没有副作用).因为不是关键字,比如直接使用undefined,内容可能被改写. 再来看为啥使用0,而 ...
- 查看应用程序使用的所有dll
VS2008命令提示符下: >dumpbin.exe /dependents <文件路径+文件名> □
- [转]阿里云CentOS配置全过程
- 搭建maven环境
有两种方式可以配置maven的环境配置,本人推荐使用第二种,即使用本地的maven安装文件,个人感觉这样可以方便管理下载jar包的存放位置,错误信息的输出等,可以在dos窗口中可以清晰看到,虽然比较麻 ...
- PBX220 测评一
//纯粹个人看法,可能包含非常不恰当的主观看法,敬请见谅. 本次测试的是易用科技Speedytel 新出的产品 PBX-220. 测试环境为:华硕EeePC(IE7).Eyebeam. 先来 ...
- 一些webGL的资源
作为一个新手,把资源写在这里. 一个简介: http://www.html5china.com/HTML5features/WebGL/20111129_2985.html 类似NEHE OPENGL ...