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 构建中文-拼音 数据库, ...
随机推荐
- Xamarin Mono 环境搭建(使用Visual Studio 2013 开发android 和 ios )
本文主要介绍Xamarin结合VS2013来开发Android应用程序,主要会介绍Mono和Xamarin的关系,以及整个搭建环境的过程. 一.Mono和Xamarin介绍 1.Mono简介 Mono ...
- Guava学习笔记：Google Guava 类库简介
http://www.cnblogs.com/peida/tag/Guava/ Guava 是一个 Google 的基于java1.6的类库集合的扩展项目,包括 collections, cachin ...
- 这有一个flag
1.并查集[1224] 2.最小生成树?? 3.topsort(好洋气): 4.归并排序[1438]: 5.差分约束系统: 6.A*算法找k短路 7.scanf: 8.搜索[P1198]华容道: 9. ...
- codeforces 446C DZY Loves Fibonacci Numbers 线段树
假如F[1] = a, F[2] = B, F[n] = F[n - 1] + F[n - 2]. 写成矩阵表示形式可以很快发现F[n] = f[n - 1] * b + f[n - 2] * a. ...
- .NET平台开发Mongo基础知识
NoSQL简介 NoSQL相关的技术最近越来越受欢迎,Mongo本身就是基于NoSQL实现的.关于NoSQL你需要了解 什么是NoSQL NoSQL和传统的关系型数据库有什么区别 NoSQL的优缺点 ...
- 总结最近移动端遇到的坑（auto-size + zepto）
问题一:移动端页面双击会放大,图片时大时正常,布局偶尔很丑..刷新多遍又乜有问题 解决:所有图片设置宽高100%,最外面的html,给个 <meta name="viewport&qu ...
- Thinkphp Exception捕获异常失败
try catch 比较坑,默认这样是走TP 的错误模板页面 自定义的话: try { } catch ( \Exception $e ) {}加个\
- WebView网页中使用到支付宝调不起来，提示ERR_UNKNOWN_URL_SCHEME
转载自:http://blog.csdn.net/u014369799/article/details/51305788 在WebView中如果使用到支付宝,需要添加以下代码,否则操作系统会将支付宝的 ...
- java 多态2
http://www.cnblogs.com/wqq0402/p/6180685.html package test05; public class DuoTai_Test02 { /**多个对象,一 ...
- sql中的日期查询
今天的所有数据: 昨天的所有数据: 7天内的所有数据: 30天内的所有数据: 本月的所有数据: 本年的所有数据: 查询今天是今年的第几天: select datepart(dayofyear,getD ...