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 构建中文-拼音 数据库, ...
随机推荐
- 04 Apache Solr: 目录结构
通过前面的介绍,我们已经能够看到管理员界面并对Solr形成了一个感性的认识.本篇将在物理上深入了解Solr的安装目录结构和Solr示例的主目录结构. 安装目录结构 Solr 6.3.0安 ...
- git clone google代码库
git clone https://chromium.googlesource.com/chromium/src 发现有将近7G,但是速度太慢,老是失败,提示信息先后是"The remot ...
- 1、Linux驱动重要的数据结构
1.struct file 这个结构体定义在 linuxsource/include/linux/fs.h 中第960行左右 具体成员如下: struct file { /* * fu_list b ...
- iscsi: 多路径
作者:吴香伟 发表于 2014/10/8 版权声明:可以任意转载,转载时务必以超链接形式标明文章原始出处和作者信息以及版权声明 上图(a)给出了计算机的总线结构,SCSI磁盘挂在SCSI卡上,SCSI ...
- ListView显示不同行以及数据重用
Handling ListViews with Multiple Row Types When you start writing Android Apps it isn’t long before ...
- Java自定义表单、自定义字段
最近想实现用户自定义数据库中的字段,我想大部分人第一想到的就是EAV(Entity-Attribute-Value),这种方式对于写一个小的毕业设计应该还可以使用,当然也有很多CMS系统采用这种方式, ...
- C#实现：给定任意数字，输出在该数字下所有（）括号的集合
class Program { static void Main(string[] args) { getPairs(, , , , ""); Console.ReadKey(); ...
- css 3 动画
1.transition,其作用是:平滑的改变CSS的值.无论是点击事件,焦点事件,还是鼠标hover,只要值改变了,就是平滑的,就是动画. transition 属性介绍: transition-p ...
- 【Mail】搭建邮件服务器（LAMP+Postfix+Dovcot+PostfixAdmin+Roundcubemail）
大纲 一.mail部署说明 二.安装准备 三.LMAP环境配置 四.配置postfixadmin 五.配置postfix 六.配置dovecot 七.测试SMTP和POP3服务 八.配置Roundcu ...
- 怎样防止重复发送 Ajax 请求？
著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:长天之云链接:http://www.zhihu.com/question/19805411/answer/15465427来源 ...