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 构建中文-拼音 数据库, ...
随机推荐
- 百度自动发贴，登录很顺利的模拟实现，但发贴攻关失败，能力有限，追JS过程中颇为痛苦
攻关失败,且短期内看不到希望,看不到方向,且越来越焦急,目前已知的是,用根据用户的鼠标事件以一定的规则结合其他数据,服务器以这些数据验证是否为真正的手动发贴. 不过闲暇时实现了百度贴吧的自动签到. 较 ...
- Linux字符串截取和处理命令 cut、printf、awk、sed、sort、wc
1. cut [选项] 文件名 -f 列号 #提取第几列(分隔符默认为\t) -d 分隔符 #指定分隔符 例如:cut -f 2 a.txt #截取文件a.txt内容的第二列(列号从1开始) cu ...
- Daily Scrum 12.14
今日完成任务: 优化了问题页面显示问题的算法:两名开发人员有CCF考试,今天没有完成任务,任务顺延到明天. 明日任务: 黎柱金 解决资源显示全部为同一个PDF的BUG 晏旭瑞 资源搜索问题 孙思权 做 ...
- php设计模式 Proxy (代理模式)
代理,指的就是一个角色代表另一个角色采取行动,就象生活中,一个红酒厂商,是不会直接把红酒零售客户的,都是通过代理来完成他的销售业务.而客户,也不用为了喝红酒而到处找工厂,他只要找到厂商在当地的代理就行 ...
- Spring Boot + Bootstrap 出现"Failed to decode downloaded font"和"OTS parsing error: Failed to convert WOFF 2.0 font to SFNT"
准确来讲,应该是maven项目使用Bootstrap时,出现 "Failed to decode downloaded font"和"OTS parsing error: ...
- 向modesim中添加alter库 （或者在每次仿真时将库文件加入仿真文件夹一起编译）
在ModelSim中进行仿真需要加入Quartus提供的仿真库,原因是下面三个方面: ·Quartus不支持Testbench: ·调用了megafunction或者lpm库之类的Alte ...
- java Thumbnails 加载网络图片，处理返回base64
URL url = new URL("图片网络地址"); BufferedInputStream in = new BufferedInputStream(url.openStre ...
- Hibernate配置步骤
1.创建WEB项目 2.从http://www.hibernate.org/下载hibernate-release-4.3.11.Final.zip,并解压. 3.将hibernate必须的包加入li ...
- web工具网站等
框架 1.handlebars http://handlebarsjs.com/ 2.http://underscorejs.org/#keys 3.http://stylus-lang.com/ 4 ...
- UVa 11729
http://vjudge.net/problem/UVA-11729 There is a war and it doesn't look very promising for your count ...