Js之软键盘实现(源码)

    鉴于安全性的考虑，不少网站在登录输入密码时都采用了软键盘，避免一些键盘记录工具和木马对击键的捕捉。项目中也有这个需求，就分享给大家了，贴个效果图上来。。有兴趣的朋友可以收藏。。..如果觉得功能有点庞大，只需要数字小键盘的朋友，可参考代码精简。
下载大键盘: http://www.cnblogs.com/Files/sccxszy/softKey.rar
小键盘：http://www.cnblogs.com/Files/sccxszy/smallSoftkey.rar
效果还原:Default.aspx,softkeyboard.js,softkey.CSS三个文件
js代码:
softkeyboard.js
  1window.onload=
  2function()
  3{
  4password1=null;       
  5initCalc();
  6}
  7var password1;
  8var CapsLockValue=0;
  9var checkSoftKey;
 10function setVariables() {
 11tablewidth=630;
 12tableheight=20;
 13if (navigator.appName == "Netscape") {
 14horz=".left";
 15vert=".top";
 16docStyle="document.";
 17styleDoc="";
 18innerW="window.innerWidth";
 19innerH="window.innerHeight";
 20offsetX="window.pageXOffset";
 21offsetY="window.pageYOffset";
 22}
 23else {
 24horz=".pixelLeft";
 25vert=".pixelTop";
 26docStyle="";
 27styleDoc=".style";
 28innerW="document.body.clientWidth";
 29innerH="document.body.clientHeight";
 30offsetX="document.body.scrollLeft";
 31offsetY="document.body.scrollTop";
 32}
 33}
 34function checkLocation() {
 35if (checkSoftKey) {
 36objectXY="softkeyboard";
 37var availableX=eval(innerW);
 38var availableY=eval(innerH);
 39var currentX=eval(offsetX);
 40var currentY=eval(offsetY);
 41x=availableX-tablewidth+currentX;
 42y=currentY;
 43evalMove();
 44}
 45setTimeout("checkLocation()",0);
 46}
 47function evalMove() {
 48eval(docStyle + objectXY + styleDoc + vert + "=" + y);
 49}
 50self.onError=null;
 51currentX = currentY = 0; 
 52whichIt = null;          
 53lastScrollX = 0; lastScrollY = 0;
 54NS = (document.layers) ？ 1 : 0;
 55IE = (document.all) ？ 1: 0;
 56function heartBeat() {
 57if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; }
 58if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
 59if(diffY != lastScrollY) {
 60percent = .1 * (diffY - lastScrollY);
 61if(percent 0) percent = Math.ceil(percent);
 62else percent = Math.floor(percent);
 63if(IE) document.all.softkeyboard.style.pixelTop += percent;
 64if(NS) document.softkeyboard.top += percent;
 65lastScrollY = lastScrollY + percent;}
 66if(diffX != lastScrollX) {
 67percent = .1 * (diffX - lastScrollX);
 68if(percent 0) percent = Math.ceil(percent);
 69else perce

  Default.aspx:
 1%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"
 2    ResponseEncoding="GB2312" %
 3
 4!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
 5html
 6head
 7    title软键盘/title
 8    link href="softkey.css" type="text/css" rel="stylesheet"
 9    script src="softkeyboard.js" type="text/javascript"/script
10/head
11body
12    form runat="server"
13        div align="center"
14          input id="tipLogPwd"  type="text"
15           onblur="tipLogPwd.className='tip_off'"
16          
17                style="width: 278px"
18        /div
19    /form
20/body
21/html
22
         softkey.css:
  1#Page_content {}{
  2    PADDING-RIGHT: 20px; PADDING-LEFT: 20px; BACKGROUND: #fff; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 860px; PADDING-TOP: 0px
  3}
  4#Header {}{
  5    BACKGROUND: url(../images5/blue/header_bg.gif) repeat-x left top
  6}
  7#Page_left {}{
  8    FLOAT: left; MARGIN: 12px 0px 15px; WIDTH: 660px
  9}
 10#Page_right {}{
 11    FLOAT: right; MARGIN: 15px 0px; WIDTH: 180px
 12}
 13#Footer {}{
 14    PADDING-RIGHT: 2px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 20px; COLOR: #aaa; PADDING-TOP: 5px; TEXT-ALIGN: left
 15}
 16.Area_title {}{
 17    PADDING-RIGHT: 2px; BORDER-TOP: #69c 2px solid; MARGIN-TOP: 10px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 13px; PADDING-BOTTOM: 7px; COLOR: #004d99; PADDING-TOP: 7px
 18}
 19.Area_content {}{
 20    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 10px; PADDING-TOP: 3px
 21}
 22.Area_button {}{
 23    MARGIN-TOP: 7px; PADDING-LEFT: 90px
 24}
 25.Area_button IMG {}{
 26    VERTICAL-ALIGN: 5px
 27}
 28.float_left {}{
 29    FLOAT: left
 30}
 31.float_right