页面代码如下：
1 <HTML> 2 <HEAD> 3 <TITLE>一个不错的js软键盘代码</TITLE> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 5 </HEAD> 6 <BODY> 7 <script language="javascript" type="text/javascript"><!-- 8 //定义当前是否大写的状态 9 window.onload= 10 function() 11 { 12 password1=null; 13 initCalc(); 14 } 15 var CapsLockValue=0; 16 var check; 17 function setVariables() { 18 tablewidth=630; // logo width, in pixels 19 tableheight=20; // logo height, in pixels 20 if (navigator.appName == "Netscape") { 21 horz=".left"; 22 vert=".top"; 23 docStyle="document."; 24 styleDoc=""; 25 innerW="windows.innerWidth"; 26 innerH="windows.innerHeight"; 27 offsetX="window.pageXOffset"; 28 offsetY="window.pageYOffset"; 29 } 30 else { 31 horz=".pixelLeft"; 32 vert=".pixelTop"; 33 docStyle=""; 34 styleDoc=".style"; 35 innerW="document.body.clientWidth"; 36 innerH="document.body.clientHeight"; 37 offsetX="document.body.scrollLeft"; 38 offsetY="document.body.scrollTop"; 39 } 40 } 41 function checkLocation() { 42 if (check) { 43 objectXY="softkeyboard"; 44 var availableX=(innerW); 45 var availableY=(innerH); 46 var currentX=(offsetX); 47 var currentY=(offsetY); 48 x=availableX-tablewidth+currentX; 49 //y=availableY-tableheight+currentY; 50 y=currentY; 51 Move(); 52 } 53 setTimeout("checkLocation()",0); 54 } 55 function Move() { 56 //(docStyle + objectXY + styleDoc + horz + "=" + x); 57 (docStyle + objectXY + styleDoc + vert + "=" + y); 58 } 59 60 self.onError=null; 61 currentX = currentY = 0; 62 whichIt = null; 63 lastScrollX = 0; lastScrollY = 0; 64 NS = (document.layers) ? 1 : 0; 65 IE = (document.all) ? 1: 0; 66 function heartBeat() { 67 if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; } 68 if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; } 69 if(diffY != lastScrollY) { 70 percent = .1 * (diffY - lastScrollY); 71 if(percent > 0) percent = Math.ceil(percent); 72 else percent = Math.floor(percent); 73 if(IE) document.all.softkeyboard.style.pixelTop += percent; 74 if(NS) document.softkeyboard.top += percent; 75 lastScrollY = lastScrollY + percent;} 76 if(diffX != lastScrollX) { 77 percent = .1 * (diffX - lastScrollX); 78 if(percent > 0) percent = Math.ceil(percent); 79 else percent = Math.floor(percent); 80 if(IE) document.all.softkeyboard.style.pixelLeft += percent; 81 if(NS) document.softkeyboard.left += percent; 82 lastScrollX = lastScrollX + percent; } } 83 function checkFocus(x,y) { 84 stalkerx = document.softkeyboard.pageX; 85 stalkery = document.softkeyboard.pageY; 86 stalkerwidth = document.softkeyboard.clip.width; 87 stalkerheight = document.softkeyboard.clip.height; 88 if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return 89 true; 90 else return false;} 91 function grabIt(e) { 92 check = false; 93 if(IE) { 94 whichIt = event.srcElement; 95 while (whichIt.id.indexOf("softkeyboard") == -1) { 96 whichIt = whichIt.parentElement; 97 if (whichIt == null) { return true; } } 98 whichIt.style.pixelLeft = whichIt.offsetLeft; 99 whichIt.style.pixelTop = whichIt.offsetTop; 100 currentX = (event.clientX + document.body.scrollLeft); 101 currentY = (event.clientY + document.body.scrollTop); 102 } else { 103 window.captureEvents(Event.MOUSEMOVE); 104 if(checkFocus (e.pageX,e.pageY)) { 105 whichIt = document.softkeyboard; 106 StalkerTouchedX = e.pageX-document.softkeyboard.pageX; 107 StalkerTouchedY = e.pageY-document.softkeyboard.pageY;} } 108 return true; } 109 function moveIt(e) { 110 if (whichIt == null) { return false; } 111 if(IE) { 112 newX = (event.clientX + document.body.scrollLeft); 113 newY = (event.clientY + document.body.scrollTop); 114 distanceX = (newX - currentX); distanceY = (newY - currentY); 115 currentX = newX; currentY = newY; 116 whichIt.style.pixelLeft += distanceX; 117 whichIt.style.pixelTop += distanceY; 118 if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = 119 document.body.scrollTop; 120 if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = 121 document.body.scrollLeft; 122 if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - 123 whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20; 124 if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - 125 whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - 126 whichIt.style.pixelHeight - 5; 127 event.returnValue = false; 128 } else { 129 whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY); 130 if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset; 131 if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset; 132 if( (whichIt.left + whichIt.clip.width) >= (windows.innerWidth+self.pageXOffset-17)) whichIt.left = 133 ((windows.innerWidth+self.pageXOffset)-whichIt.clip.width)-17; 134 if( (whichIt.top + whichIt.clip.height) >= (windows.innerHeight+self.pageYOffset-17)) whichIt.top = 135 ((windows.innerHeight+self.pageYOffset)-whichIt.clip.height)-17; 136 return false;} 137 return false; } 138 function dropIt() {whichIt = null; 139 if(NS) window.releaseEvents (Event.MOUSEMOVE); 140 return true; } 141 if(NS) {window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN); 142 window.onmousedown = grabIt; 143 window.onmousemove = moveIt; 144 window.onmouseup = dropIt; } 145 if(IE) { 146 document.onmousedown = grabIt; 147 document.onmousemove = moveIt; 148 document.onmouseup = dropIt; } 149 // if(NS || IE) action = window.setInterval("heartBeat()",1); 150 151 document.write("<DIV align=center id="softkeyboard" name="softkeyboard" style="position:absolute; left:0px; 152 top:0px; 500px; z-index:180;display:none"> <table id="CalcTable" width="" border="0" align="center" 153 cellpadding="0" cellspacing="0" bgcolor=""> <FORM id=Calc name=Calc action="" method=post 154 autocomplete="off"> <tr> <td title="尊敬的客户：为了保证密码安全,建议使用密码输入器输入密码!" align="right" 155 valign="middle" bgcolor="" style="cursor: default;height:30"> <INPUT type=hidden value="" name=password> <INPUT 156 type=hidden value=ok name=action2> <font style="font-size:13px;">为了密码安全,请使用密码输入器输入密码 157 </font>             <INPUT 158 style="100px;height:20px;background-color:#54BAF1;" type=button value="使用键盘输入" bgtype="1" 159 onclick="password1.readOnly=0;password1.focus();softkeyboard.style.display='none';password1.value='';"><span 160 style="2px;"></span></td> </tr> <tr align="center"> <td align="center" bgcolor="#FFFFFF"> 161 <table align="center" width="%" border="0" cellspacing="1" cellpadding="0"> <tr align="left" 162 valign="middle"> <td> <input type=button value=" ~ "></td> <td> <input type=button value=" ! 163 "></td> <td> <input type=button value=" @ "></td> <td> <input type=button value=" # "></td> 164 <td> <input type=button value=" $ "></td> <td> <input type=button value=" % "></td> 165 <td> <input type=button value=" ^ "></td> <td> <input type=button value=" & "></td> <td> <input 166 type=button value=" * "></td> <td> <input type=button value=" ( "></td> <td> <input type=button 167 value=" ) "></td> <td> <input type=button value=" _ "></td> <td> <input type=button value=" + 168 "></td> <td> <input type=button value=" | "></td> <td colspan="1" rowspan="2"> <input 169 name="button10" type=button value=" 退格" onclick="setpassvalue();" onDblClick="setpassvalue();" 170 style="100px;height:42px"> </td> </tr> <tr align="left" valign="middle"> 171 <td> <input type=button value=" ` "></td> <td> <input type=button value=" 1 "></td> 172 <td> <input type=button value=" 2 "></td> <td> <input type=button value=" 3 "></td> <td> <input 173 type=button value=" 4 "></td> <td> <input type=button value=" 5 "></td> <td> <input type=button 174 value=" 6 "></td> <td> <input type=button value=" 7 "></td> <td> <input type=button value=" 8 175 "></td> <td> <input type=button value=" 9 "></td> <td> <input name="button6" type=button 176 value=" 0 "></td> <td> <input type=button value=" - "></td> <td> <input type=button value=" = 177 "></td> <td> <input type=button value=" \ "></td> <td> </td> </tr> <tr 178 align="left" valign="middle"> <td> <input type=button value=" q "></td> <td> <input 179 type=button value=" w "></td> <td> <input type=button value=" e "></td> <td> <input type=button 180 value=" r "></td> <td> <input type=button value=" t "></td> <td> <input type=button value=" y 181 "></td> <td> <input type=button value=" u "></td> <td> <input type=button value=" i "></td> 182 <td> <input type=button value=" o "></td> <td> <input name="button8" type=button value=" p 183 "></td> <td> <input name="button9" type=button value=" { "></td> <td> <input type=button 184 value=" } "></td> <td> <input type=button value=" [ "></td> <td> <input type=button value=" ] 185 "></td> <td><input name="button9" type=button onClick="capsLockText();setCapsLock();" 186 onDblClick="capsLockText();setCapsLock();" value="切换大/小写" style="100px;"></td> </tr> 187 <tr align="left" valign="middle"> <td> <input type=button value=" a "></td> <td> <input 188 type=button value=" s "></td> <td> <input type=button value=" d "></td> <td> <input type=button 189 value=" f "></td> <td> <input type=button value=" g "></td> <td> <input type=button value=" h 190 "></td> <td> <input type=button value=" j "></td> <td> <input name="button3" type=button 191 value=" k "></td> <td> <input name="button4" type=button value=" l "></td> <td> <input 192 name="button5" type=button value=" : "></td> <td> <input name="button7" type=button value=" " 193 "></td> <td> <input type=button value=" ; "></td> <td> <input type=button value=" ' "></td> 194 <td rowspan="2" colspan="2"> <input name="button12" type=button onclick="OverInput();" value=" 确定 " 195 style="130px;height:42"></td> </tr> <tr align="left" valign="middle"> <td> 196 <input name="button2" type=button value=" z "></td> <td> <input type=button value=" x "></td> 197 <td> <input type=button value=" c "></td> <td> <input type=button value=" v "></td> <td> <input 198 type=button value=" b "></td> <td> <input type=button value=" n "></td> <td> <input type=button 199 value=" m "></td> <td> <input type=button value=" < "></td> <td> <input type=button value=" 200 > "></td> <td> <input type=button value=" ? "></td> <td> <input type=button value=" , 201 "></td> <td> <input type=button value=" . "></td> <td> <input type=button value=" / "></td> 202 </tr> </table></td> </FORM> </tr> </table></DIV>") 203 //给输入的密码框添加新值 204 function addValue(newValue) 205 { 206 if (CapsLockValue==0) 207 { 208 var str=Calc.password.value; 209 if(str.length<password1.maxLength) 210 { 211 Calc.password.value += newValue; 212 } 213 if(str.length<=password1.maxLength) 214 { 215 password1.value=Calc.password.value; 216 } 217 } 218 else 219 { 220 var str=Calc.password.value; 221 if(str.length<password1.maxLength) 222 { 223 Calc.password.value += newValue.toUpperCase(); 224 } 225 if(str.length<=password1.maxLength) 226 { 227 password1.value=Calc.password.value; 228 } 229 } 230 } 231 //实现BackSpace键的功能 232 function setpassvalue() 233 { 234 var longnum=Calc.password.value.length; 235 var num 236 num=Calc.password.value.substr(0,longnum-1); 237 Calc.password.value=num; 238 var str=Calc.password.value; 239 password1.value=Calc.password.value; 240 } 241 //输入完毕 242 function OverInput() 243 { 244 //m_pass.mempass.value=Calc.password.value; 245 var str=Calc.password.value; 246 password1.value=Calc.password.value; 247 //alert(theForm.value); 248 //theForm.value=m_pass.mempass.value; 249 softkeyboard.style.display="none"; 250 Calc.password.value=""; 251 password1.readOnly=1; 252 //password1.value=Calc.password.value; 253 } 254 //关闭软键盘 255 function closekeyboard(theForm) 256 { 257 //("var theForm="+theForm+";"); 258 //theForm.value=""; 259 softkeyboard.style.display="none"; 260 //Calc.password.value=""; 261 } 262 //显示软键盘 263 function showkeyboard() 264 { 265 if(event.y+140) 266 softkeyboard.style.top=event.y+document.body.scrollTop+15; 267 if((event.x-250)>0) 268 { 269 softkeyboard.style.left=event.x-250; 270 } 271 else 272 { 273 softkeyboard.style.left=0; 274 } 275 276 softkeyboard.style.display="block"; 277 password1.readOnly=1; 278 password1.blur(); 279 //password1.value=""; 280 } 281 //设置是否大写的值 282 function setCapsLock() 283 { 284 if (CapsLockValue==0) 285 { 286 CapsLockValue=1 287 // Calc.showCapsLockValue.value="当前是大写 "; 288 } 289 else 290 { 291 CapsLockValue=0 292 // Calc.showCapsLockValue.value="当前是小写 "; 293 } 294 } 295 296 function setCalcborder() 297 { 298 CalcTable.style.border="1px solid #0090FD" 299 } 300 function setHead() 301 { 302 CalcTable.cells[0].style.backgroundColor="#7EDEFF" 303 } 304 function setCalcButtonBg() 305 { 306 for(var i=0;i<Calc.elements.length;i++) 307 { 308 if(Calc.elements[i].type=="button"&&Calc.elements[i].bgtype!="1") 309 { 310 // if(i==10) 311 // alert(123); 312 Calc.elements[i].style.borderTopWidth= 0 313 Calc.elements[i].style.borderRightWidth= 2 314 Calc.elements[i].style.borderBottomWidth= 2 315 Calc.elements[i].style.borderLeftWidth= 0 316 Calc.elements[i].style.borderTopStyle= "none"; 317 Calc.elements[i].style.borderRightStyle= "solid"; 318 Calc.elements[i].style.borderBottomStyle= "solid"; 319 Calc.elements[i].style.borderLeftStyle= "none"; 320 //#46AC17 321 Calc.elements[i].style.borderTopColor= "#118ACC"; 322 Calc.elements[i].style.borderRightColor= "#118ACC"; 323 Calc.elements[i].style.borderBottomColor= "#118ACC"; 324 Calc.elements[i].style.borderLeftColor= "#118ACC"; 325 //#CBF3B2 326 Calc.elements[i].style.backgroundColor="#ADDEF8"; 327 328 329 var str1=Calc.elements[i].value; 330 str1=str1.trim(); 331 332 if(str1.length==1) 333 { 334 //Calc.elements[i].style.fontSize=16; 335 //Calc.elements[i].style.fontWeight='bold'; 336 } 337 338 var thisButtonValue=Calc.elements[i].value; 339 thisButtonValue=thisButtonValue.trim(); 340 if(thisButtonValue.length==1) 341 { 342 Calc.elements[i].onclick= 343 function () 344 { 345 var thisButtonValue=this.value; 346 thisButtonValue=thisButtonValue.trim(); 347 addValue(thisButtonValue); 348 //alert(234) 349 } 350 Calc.elements[i].ondblclick= 351 function () 352 { 353 var thisButtonValue=this.value; 354 thisButtonValue=thisButtonValue.trim(); 355 addValue(thisButtonValue); 356 //alert(234) 357 } 358 } 359 360 } 361 } 362 } 363 function initCalc() 364 { 365 setCalcborder(); 366 setHead(); 367 setCalcButtonBg(); 368 } 369 String.prototype.trim = function() 370 { 371 // 用正则表达式将前后空格 372 // 用空字符串替代。 373 return this.replace(/(^s*)|(s*$)/g, ""); 374 } 375 var capsLockFlag; 376 capsLockFlag=true; 377 function capsLockText() 378 { 379 if(capsLockFlag)//改成大写 380 { 381 for(var i=0;i<Calc.elements.length;i++) 382 { 383 var char=Calc.elements[i].value; 384 var char=char.trim() 385 if(Calc.elements[i].type=="button"&&char>="a"&&char<="z"&&char.length==1) 386 { 387 388 Calc.elements[i].value=" "+String.fromCharCode(char.charCodeAt(0)-32)+" " 389 } 390 } 391 } 392 else 393 { 394 for(var i=0;i<Calc.elements.length;i++) 395 { 396 var char=Calc.elements[i].value; 397 var char=char.trim() 398 if(Calc.elements[i].type=="button"&&char>="A"&&char<="Z"&&char.length==1) 399 { 400 401 Calc.elements[i].value=" "+String.fromCharCode(char.charCodeAt(0)+32)+" " 402 } 403 } 404 } 405 capsLockFlag=!capsLockFlag; 406 } 407 //--> 408 </script> 409 <script> 410 //定义当前需用软键盘的表单和控件的名称 411 var curEditName 412 curEditName="form1.Password" 413 </script> 414 <form name="form1" method="post" action=""> 415 <table border="0" width="250" cellspacing="0" cellpadding="2"> 416 <tr> 417 <td width="100%" align="right" nowrap class="cn90">输入： 418 <input id="Password1" type="text" name="Password1" size="14" class="input" tabindex="1" 419 onKeyDown="Calc.password.value=this.value" onChange="Calc.password.value=this.value" onclick= "password1=this;showkeyboard 420 ();this.readOnly=1;Calc.password.value=''"> 421 </td> 422 <td width="50%" class="cn90" nowrap><a onClick="showkeyboard(curEditName)" style={cursor:hand;}><font color="#0000CC">使用软 423 键盘</font></a></td> 424 </tr> 425 </table> 426 </form> 427 </BODY> 428 </HTML>
效果图片：
