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