<!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>
