鉴于安全性的考虑，不少网站在登录输入密码时都采用了软键盘，避免一些键盘记录工具和木马对击键的捕捉。项目中也有这个需求，就分享给大家了，贴个效果图上来。。有兴趣的朋友可以收藏。。..如果觉得功能有点庞大，只需要数字小键盘的朋友，可参考代码精简。
下载大键盘: 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 percent = Math.floor(percent);
 70if(IE) document.all.softkeyboard.style.pixelLeft += percent;
 71if(NS) document.softkeyboard.left += percent;
 72lastScrollX = lastScrollX + percent;    }        }
 73function checkFocus(x,y) {
 74stalkerx = document.softkeyboard.pageX;
 75stalkery = document.softkeyboard.pageY;
 76stalkerwidth = document.softkeyboard.clip.width;
 77stalkerheight = document.softkeyboard.clip.height;
 78if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return true;
 79else return false;}
 80function grabIt(e) {
 81checkSoftKey = false;
 82if(IE) {
 83whichIt = event.srcElement;
 84while (whichIt.id!=null&&whichIt.id.indexOf("softkeyboard") == -1) {
 85whichIt = whichIt.parentElement;
 86if (whichIt == null) { return true; } }
 87if(whichIt.style!=null){
 88whichIt.style.pixelLeft = whichIt.offsetLeft;
 89whichIt.style.pixelTop = whichIt.offsetTop;
 90}
 91currentX = (event.clientX + document.body.scrollLeft);
 92currentY = (event.clientY + document.body.scrollTop);    
 93} else {
 94window.captureEvents(Event.MOUSEMOVE);
 95if(checkFocus (e.pageX,e.pageY)) {
 96whichIt = document.softkeyboard;
 97StalkerTouchedX = e.pageX-document.softkeyboard.pageX;
 98StalkerTouchedY = e.pageY-document.softkeyboard.pageY;} }
 99return true;    }
100function moveIt(e) {
101if (whichIt == null) { return false; }
102if(IE) {
103if(whichIt.style!=null){
104newX = (event.clientX + document.body.scrollLeft);
105newY = (event.clientY + document.body.scrollTop);
106distanceX = (newX - currentX);    distanceY = (newY - currentY);
107currentX = newX;    currentY = newY;
108whichIt.style.pixelLeft += distanceX;
109whichIt.style.pixelTop += distanceY;
110if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop;
111if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft;
112if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;
113if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5;
114event.returnValue = false;
115}
116} else {
117whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);
118if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset;
119if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset;
120if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;
121if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;
122return false;}
123return false;    }
124function dropIt() {whichIt = null;
125if(NS) window.releaseEvents (Event.MOUSEMOVE);
126return true;    }
127if(NS) {window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
128window.onmousedown = grabIt;
129window.onmousemove = moveIt;
130window.onmouseup = dropIt;    }
131if(IE) {
132document.onmousedown = grabIt;
133document.onmousemove = moveIt;
134document.onmouseup = dropIt;    }
135var style1="<style>";
136style1+=".btn_letter {BORDER-RIGHT: 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: 1px solid; PADDING-LEFT: 2px;FONT-SIZE: 14px; BORDER-LEFT: 1px solid; CURSOR: hand;PADDING-TOP: 1px; BORDER-BOTTOM: 1px solid; width:25px; height:20px;}";
137style1+=".btn_num {width:25px;BORDER-RIGHT:1px solid; PADDING-RIGHT: 1px; BORDER-TOP: 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; BORDER-LEFT: 1px solid; CURSOR: hand; PADDING-TOP: 1px; BORDER-BOTTOM: 1px solid;height:20px;}";
138style1+=".table_title {FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#B2DEF7, EndColorStr=#7AB7DA); height:26px;padding-top: 3px;}";
139style1+=".btn_input {BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid}";
140style1+="</style>";   
141document.write(style1);                                                                                                                                                                                                           
142document.write("<DIV align=center id=\"softkeyboard\" name=\"softkeyboard\" style=\"position:absolute; left:0px; top:0px; width:400px; z-index:180;display:none\"><table id=\"CalcTable\" width=\"\" border=\"0\" align=\"center\" cellpadding=\"0\" cellspacing=\"0\" bgcolor=\"\"><FORM id=Calc name=Calc action=\"\" method=post autocomplete=\"off\"><tr><td class=\"table_title\"  align=\"right\" valign=\"middle\" bgcolor=\"\" style=\"cursor: default;height:30\"><INPUT type=hidden value=\"\" name=password><INPUT type=hidden value=ok name=action2>&nbsp<font style=\"font-weight:bold; font-size:13px; color:#075BC3\">博客园&nbsp;&nbsp;密码输入器</font>&nbsp&nbsp&am

[1] [2] [3] [4] 下一页