![js]( "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 复制代码 代码如下:window.onload= function() { password=null; initCalc(); } var password; var CapsLockValue=; var checkSoftKey; function setVariables() { tablewidth=; tableheight=; if (navigator.appName == "Netscape") { horz=".left"; vert=".top"; docStyle="document."; styleDoc=""; innerW="window.innerWidth"; innerH="window.innerHeight"; offsetX="window.pageXOffset"; offsetY="window.pageYOffset"; } else { horz=".pixelLeft"; vert=".pixelTop"; docStyle=""; styleDoc=".style"; innerW="document.body.clientWidth"; innerH="document.body.clientHeight"; offsetX="document.body.scrollLeft"; offsetY="document.body.scrollTop"; } } function checkLocation() { if (checkSoftKey) { objectXY="softkeyboard"; var availableX=eval(innerW); var availableY=eval(innerH); var currentX=eval(offsetX); var currentY=eval(offsetY); x=availableX-tablewidth+currentX; y=currentY; evalMove(); } setTimeout("checkLocation()",); } function evalMove() { eval(docStyle + objectXY + styleDoc + vert + "=" + y); } self.onError=null; currentX = currentY =; whichIt = null; lastScrollX =; lastScrollY =; NS = (document.layers) ? :; IE = (document.all) ?:; function heartBeat() { if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; } if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; } if(diffY != lastScrollY) { percent = . * (diffY - lastScrollY); if(percent >) percent = Math.ceil(percent); else percent = Math.floor(percent); if(IE) document.all.softkeyboard.style.pixelTop += percent; if(NS) document.softkeyboard.top += percent; lastScrollY = lastScrollY + percent;} if(diffX != lastScrollX) { percent = . * (diffX - lastScrollX); if(percent >) percent = Math.ceil(percent); else percent = Math.floor(percent); if(IE) document.all.softkeyboard.style.pixelLeft += percent; if(NS) document.softkeyboard.left += percent; lastScrollX = lastScrollX + percent; } } function checkFocus(x,y) { stalkerx = document.softkeyboard.pageX; stalkery = document.softkeyboard.pageY; stalkerwidth = document.softkeyboard.clip.width; stalkerheight = document.softkeyboard.clip.height; if( (x > stalkerx && x stalkery && y (stalkery+stalkerheight))) return true; else return false;} function grabIt(e) { checkSoftKey = false; if(IE) { whichIt = event.srcElement; while (whichIt.id!=null&&whichIt.id.indexOf("softkeyboard") == -) { whichIt = whichIt.parentElement; if (whichIt == null) { return true; } } if(whichIt.style!=null){ whichIt.style.pixelLeft = whichIt.offsetLeft; whichIt.style.pixelTop = whichIt.offsetTop; } currentX = (event.clientX + document.body.scrollLeft); currentY = (event.clientY + document.body.scrollTop); } else { window.captureEvents(Event.MOUSEMOVE); if(checkFocus (e.pageX,e.pageY)) { whichIt = document.softkeyboard; StalkerTouchedX = e.pageX-document.softkeyboard.pageX; StalkerTouchedY = e.pageY-document.softkeyboard.pageY;} } return true; } function moveIt(e) { if (whichIt == null) { return false; } if(IE) { if(whichIt.style!=null){ newX = (event.clientX + document.body.scrollLeft); newY = (event.clientY + document.body.scrollTop); distanceX = (newX - currentX); distanceY = (newY - currentY); currentX = newX; currentY = newY; whichIt.style.pixelLeft += distanceX; whichIt.style.pixelTop += distanceY; if(whichIt.style.pixelTop document.body.scrollTop; if(whichIt.style.pixelLeft document.body.scrollLeft; if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth -) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth -; if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight -) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight -; event.returnValue = false; } } else { whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY); if(whichIt.left if(whichIt.top if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-; if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-; return false;} return false; } function dropIt() {whichIt = null; if(NS) window.releaseEvents (Event.MOUSEMOVE); return true; } if(NS) {window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN); window.onmousedown = grabIt; window.onmousemove = moveIt; window.onmouseup = dropIt; } if(IE) { document.onmousedown = grabIt; document.onmousemove = moveIt; document.onmouseup = dropIt; } var style=""; style+=".btn_letter {BORDER-RIGHT:px solid; PADDING-RIGHT:px; BORDER-TOP:px solid; PADDING-LEFT:px;FONT-SIZE:px; BORDER-LEFT:px solid; CURSOR: hand;PADDING-TOP:px; BORDER-BOTTOM:px solid; width:px; height:px;}"; style+=".btn_num {width:px;BORDER-RIGHT:px solid; PADDING-RIGHT:px; BORDER-TOP:px solid; PADDING-LEFT:px; FONT-SIZE:px; BORDER-LEFT:px solid; CURSOR: hand; PADDING- TOP:px; BORDER-BOTTOM:px solid;height:px;}"; style+=".table_title {FILTER: progid:DXImageTransform.Microsoft.Gradient (GradientType=,StartColorStr=#BDEF, EndColorStr=#ABDA); height:px;padding-top: px;}"; style+=".btn_input {BORDER-RIGHT: #CAApx solid; PADDING-RIGHT:px; BORDER-TOP: #CAApx solid; PADDING-LEFT:px; FONT-SIZE:px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=, StartColorStr=#ffffff, EndColorStr=#CDAF); BORDER-LEFT: #CAApx solid; CURSOR: hand; COLOR: black; PADDING- TOP:px; BORDER-BOTTOM: #CAApx solid}"; style+=""; document.write(style); document.write("style=\"position:absolute; left:px; top:px; width:px; z-index:;display:none\">id=\"CalcTable\" width=\"\" border=\"\" align=\"center\" cellpadding=\"\" cellspacing=\" \" bgcolor=\"\">class=\"table_title\" align=\"right\" valign=\"middle\" bgcolor=\"\" style=\"cursor: default;height:\">name=action> 博客园 密码输入器 &n bsp value=\"使用键盘输入\" bgtype=\"\" onclick=\"password.readOnly=;password.focus ();closekeyboard();password.value='';\">align=\"center\">\" border=\"\" cellspacing=\"\" cellpadding=\"\">\n \n \n \">\n \n \">\n \n\">\n\n \">\n\n\">\n\n\">\n \n\">\n 格\" onclick=\"setpassvalue();\" onDblClick=\"setpassvalue();\" style=\"width:px;height:px\"> \n\n\n \n\nname=\"button_number\" value=\" \">\n name=\"button_number\" value=\" \">\n name=\"button_number\" value=\" \">\n name=\"button_number\" value=\" \">\n name=\"button_number\" value=\" \">\n name=\"button_number\" value=\" \">\n name=\"button_number\" value=\" \">\n name=\"button_number\" value=\" \">\n name=\"button_number\" value=\" \">\n name=\"button_number\" type=button value=\" \">\n \">\n \n \">\n \n\n \n value=\" q \">\n \n value=\" e \">\n \n value=\" t \">\n \n value=\" u \">\n \n value=\" o \">\n \n \n \">\n \n \">\nonDblClick=\"capsLockText();setCapsLock();\" value=\"切换大/小写\" style=\"width:px;\">\n\n \n type=button value=\" a \">\n \n type=button value=\" d \">\n \n type=button value=\" g \">\n \n type=button value=\" j \">\n \">\n \n name=\"button\" type=button value=\" : \">\n value=\" " \">\n \n type=button value=\" ' \">\n type=button onclick=\"OverInput();\" value=\" 确定 \" style=\"width:px;height:px;\">\n\n \n\n value=\" x \">\n \n value=\" v \">\n \n value=\" n \">\n \n value=\" \n \">\n type=button value=\" ? \">\n \n type=button value=\" . \">\n \">\n\n"); function addValue(newValue) { if (CapsLockValue==) { var str=Calc.password.value; if(str.length{ Calc.password.value += newValue; } if(str.length{ password.value=Calc.password.value; } } else { var str=Calc.password.value; if(str.length{ //Calc.password.value += newValue.toUpperCase(); Calc.password.value += newValue; } if(str.length{ password.value=Calc.password.value; } } } function setpassvalue() { var longnum=Calc.password.value.length; var num num=Calc.password.value.substr(,longnum-); Calc.password.value=num; var str=Calc.password.value; password.value=Calc.password.value; } function OverInput() { var str=Calc.password.value; password.value=Calc.password.value; closekeyboard(); Calc.password.value=""; password.readOnly=; } function closekeyboard(theForm) { softkeyboard.style.display="none"; if(null!=unhideSelect){ unhideSelect(); } } function showkeyboard() { randomNumberButton(); var th = password; var ttop = th.offsetTop; var thei = th.clientHeight; var tleft = th.offsetLeft; var ttyp = th.type; while (th = th.offsetParent){ttop+=th.offsetTop; tleft+=th.offsetLeft;} softkeyboard.style.top = ttop+thei+; softkeyboard.style.left = tleft-; softkeyboard.style.display="block"; password.readOnly=; password.blur(); document.all.useKey.focus(); if(null!=hideSelect){ hideSelect(); } } function setCapsLock() { if (CapsLockValue==) { CapsLockValue= } else { CapsLockValue= } } function setCalcborder() { CalcTable.style.border="px solid #BADF" } function setHead() { CalcTable.cells[].style.backgroundColor="#BADF" } function setCalcButtonBg() { for(var i=;i{ if(Calc.elements[i].type=="button"&&Calc.elements[i].bgtype!="") { if(Calc.elements[i].bgtype==""){ Calc.elements[i].className="btn_num"; }else{ Calc.elements[i].className="btn_letter"; } var str=Calc.elements[i].value; str=str.trim(); if(str.length==) { } var thisButtonValue=Calc.elements[i].value; thisButtonValue=thisButtonValue.trim(); if(thisButtonValue.length==) { Calc.elements[i].onclick= function () { var thisButtonValue=this.value; thisButtonValue=thisButtonValue.trim(); thisButtonValue=jiamiMimaKey(thisButtonValue); addValue(thisButtonValue); } Calc.elements[i].ondblclick= function () { var thisButtonValue=this.value; thisButtonValue=thisButtonValue.trim(); thisButtonValue=jiamiMimaKey(thisButtonValue); addValue(thisButtonValue); } } } } } function initCalc() { setCalcborder(); setHead(); setCalcButtonBg(); } String.prototype.trim = function() { return this.replace(/(^\s*)|(\s*$)/g, ""); } var capsLockFlag; capsLockFlag=true; function capsLockText() { if(capsLockFlag) { for(var i=;i{ var char=Calc.elements[i].value; var char=char.trim() if(Calc.elements[i].type=="button"&&char>="a"&&char{ Calc.elements[i].value=" "+String.fromCharCode(char.charCodeAt()-)+" " } } } else { for(var i=;i{ var char=Calc.elements[i].value; var char=char.trim() if(Calc.elements[i].type=="button"&&char>="A"&&char{ Calc.elements[i].value=" "+String.fromCharCode(char.charCodeAt()+)+" " } } } capsLockFlag=!capsLockFlag; } function randomNumberButton(){ var a = new Array(); a[]=;a[]=;a[]=;a[]=;a[]=;a[]=;a[]=;a[]=;a[]=;a[]=; var randomNum; var times=; for(var i=;irandomNum = parseInt(Math.random()*); var tmp=a[]; a[]=a[randomNum]; a[randomNum]=tmp; } Calc.button_number.value=" "+a[]+" "; Calc.button_number.value=" "+a[]+" "; Calc.button_number.value=" "+a[]+" "; Calc.button_number.value=" "+a[]+" "; Calc.button_number.value=" "+a[]+" "; Calc.button_number.value=" "+a[]+" "; Calc.button_number.value=" "+a[]+" "; Calc.button_number.value=" "+a[]+" "; Calc.button_number.value=" "+a[]+" "; Calc.button_number.value=" "+a[]+" "; } function hideSelect(){ var i=; while(idocument.getElementsByTagName("select")[i].style.visibility = "hidden"; i=i+; } } function unhideSelect(){ var i=; while(idocument.getElementsByTagName("select")[i].style.visibility = "visible"; i=i+; } } function jiamiMimaKey(newValue) { if (typeof(b) == "undefined" || typeof(ifUseYinshe) == "undefined" || ifUseYinshe == ) {return newValue;} var everyone = ''; var afterPass = ''; for (var i=;i everyone = newValue.charAt(i); for (var j =;j if (everyone == b[*j]) { afterPass = afterPass + b[*j+]; break; } } } newValue= afterPass; jiami =; return afterPass; } Default.aspx: Inherits="_Default" ResponseEncoding="GB" %> "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd"> 软键盘 onblur="tipLogPwd.className='tip_off'" onclick="password=this;showkeyboard();this.readOnly=;Calc.password.value=''" style="width:px"> softkey.css: 复制代码 代码如下:#Page_content {}{ PADDING-RIGHT:px; PADDING-LEFT:px; BACKGROUND: #fff; PADDING-BOTTOM:px; MARGIN:px auto; WIDTH:px; PADDING-TOP:px } #Header {}{ BACKGROUND: url(../images/blue/header_bg.gif) repeat-x left top } #Page_left {}{ FLOAT: left; MARGIN:pxpxpx; WIDTH:px } #Page_right {}{ FLOAT: right; MARGIN:pxpx; WIDTH:px } #Footer {}{ PADDING-RIGHT:px; BORDER-TOP: #eeepx solid; PADDING-LEFT:px; PADDING-BOTTOM: px; COLOR: #aaa; PADDING-TOP:px; TEXT-ALIGN: left } .Area_title {}{ PADDING-RIGHT:px; BORDER-TOP: #cpx solid; MARGIN-TOP:px; PADDING-LEFT:px; FONT-WEIGHT: bold; FONT-SIZE:px; PADDING-BOTTOM:px; COLOR: #d; PADDING-TOP:px } .Area_content {}{ PADDING-RIGHT:px; PADDING-LEFT:px; PADDING-BOTTOM:px; PADDING-TOP:px } .Area_button {}{ MARGIN-TOP:px; PADDING-LEFT:px } .Area_button IMG {}{ VERTICAL-ALIGN:px } .float_left {}{ FLOAT: left } .float_right {}{ FLOAT: right } .content_title {}{ PADDING-RIGHT:px; PADDING-LEFT:px; FONT-WEIGHT: bold; PADDING-BOTTOM:px; COLOR: #; PADDING-TOP:px } .relative {}{ PADDING-RIGHT:px; BORDER-TOP: #cpx solid; PADDING-LEFT:px; LIST-STYLE- POSITION: inside; BACKGROUND: none transparent scroll repeat%%; LIST-STYLE-IMAGE: url (../images/blue/icon_list.gif); PADDING-BOTTOM:px; MARGIN:pxpxpx; PADDING-TOP:px } .relative LI {}{ PADDING-RIGHT:px; PADDING-LEFT:px; FONT-WEIGHT: normal; PADDING-BOTTOM:px; MARGIN:pxpxpx; COLOR: #; PADDING-TOP:px; BORDER-BOTTOM: #dddpx solid } {}{ PADDING-RIGHT:px; PADDING-LEFT:px; PADDING-BOTTOM:px; MARGIN:px; PADDING-TOP: px } BODY {}{ BACKGROUND: #eee } BODY {}{ FONT:px "宋体",Tahoma; COLOR: # } DIV {}{ FONT:px "宋体",Tahoma; COLOR: # } TD {}{ FONT:px "宋体",Tahoma; COLOR: # } SPAN {}{ FONT:px "宋体",Tahoma; COLOR: # } SELECT {}{ FONT:px "宋体",Tahoma; COLOR: # } P {}{ FONT:px "宋体",Tahoma; COLOR: # } IMG {}{ BORDER-TOP-WIDTH:px; BORDER-LEFT-WIDTH:px; BORDER-BOTTOM-WIDTH:px; BORDER- RIGHT-WIDTH:px } A {}{ COLOR: #; TEXT-DECORATION: none } A:hover {}{ COLOR: #b; TEXT-DECORATION: none } INPUT {}{ FONT:px "宋体",Tahoma } INPUT.button {}{ BORDER-TOP-WIDTH:px; PADDING-RIGHT:px; PADDING-LEFT:px; BORDER-LEFT-WIDTH: px; BACKGROUND: url(../images/blue/button_bg.gif) #ada repeat-x left top; BORDER- BOTTOM-WIDTH:px; PADDING-BOTTOM:px; CURSOR: hand; COLOR: #fff; MARGIN-RIGHT:px; PADDING-TOP:px; BORDER-RIGHT-WIDTH:px } INPUT.button_dis {}{ BORDER-TOP-WIDTH:px; PADDING-RIGHT:px; PADDING-LEFT:px; BORDER-LEFT-WIDTH: px; BORDER-BOTTOM-WIDTH:px; PADDING-BOTTOM:px; CURSOR: hand; COLOR: #fff; MARGIN-RIGHT: px; PADDING-TOP:px; BORDER-RIGHT-WIDTH:px } UL {}{ PADDING-LEFT:px; FONT-WEIGHT: bold; LIST-STYLE-POSITION: outside; BACKGROUND: url (../images/icon_ul.gif) no-repeat left top; LIST-STYLE-IMAGE: url (../images/blue/icon_list.gif); MARGIN:px; COLOR: # } LI {}{ PADDING-RIGHT:px; PADDING-LEFT:px; FONT-WEIGHT: normal; PADDING-BOTTOM:px; MARGIN:pxpxpx; COLOR: #; PADDING-TOP:px } .clear {}{ CLEAR: both } .top_margin {}{ MARGIN:pxpxpxpx } .text_bold {}{ FONT-WEIGHT: bold } .step_on .text_content {}{ COLOR: # } .text_content {}{ PADDING-RIGHT:px; PADDING-LEFT:px; PADDING-BOTTOM:px; PADDING-TOP:px; BORDER -BOTTOM: #eeepx solid } .text_red {}{ COLOR: #b } A.text_red:hover {}{ COLOR: # } .req {}{ FONT-WEIGHT: bold; COLOR: #b } .info {}{ COLOR: # } .dark {}{ COLOR: # } .text_big {}{ FONT-SIZE:px; COLOR: #; LINE-HEIGHT:px } .big {}{ FONT-SIZE:px } .reg_flow {}{ PADDING-RIGHT:px; PADDING-LEFT:px; FONT-WEIGHT: normal; FONT-SIZE:px; BACKGROUND: #fff; PADDING-BOTTOM:px; MARGIN:pxpxpx; COLOR: #; PADDING-TOP: px } .reg_title {}{ PADDING-RIGHT:px; PADDING-LEFT:px; FONT-WEIGHT: bold; FONT-SIZE:px; BACKGROUND: url(../images/icon_reg.gif) no-repeat left top; PADDING-BOTTOM:px; COLOR: #d; PADDING-TOP:px } .flow_focus {}{ FONT-WEIGHT: bold; COLOR: #b } .flow_undo {}{ COLOR: # } .flow_done {}{ COLOR: # } .image_safe {}{ PADDING-LEFT:px; BACKGROUND: url(../images/icon_safe_big.gif) no-repeat left top } .text_success {}{ BORDER-RIGHT: #cpx solid; PADDING-RIGHT:px; BORDER-TOP: #cpx solid; PADDING-LEFT:px; BACKGROUND: url(../images/blue/icon_success.gif) #ffff no-repeatpx %; PADDING-BOTTOM:px; BORDER-LEFT: #cpx solid; PADDING-TOP:px; BORDER-BOTTOM: #cpx solid } .text_notice {}{ BORDER-RIGHT: #cpx solid; PADDING-RIGHT:px; BORDER-TOP: #cpx solid; PADDING-LEFT:px; BACKGROUND: url(../images/blue/icon_gantan.gif) #ffff no-repeatpx %; PADDING-BOTTOM:px; BORDER-LEFT: #cpx solid; PADDING-TOP:px; BORDER-BOTTOM: #cpx solid } .reg_info {}{ BORDER-RIGHT: #cpx solid; PADDING-RIGHT:px; BORDER-TOP: #cpx solid; PADDING-LEFT:px; BACKGROUND: url(../images/blue/icon_info.gif) #ffff no-repeatpx %; PADDING-BOTTOM:px; BORDER-LEFT: #cpx solid; PADDING-TOP:px; BORDER-BOTTOM: #c px solid } .step_on .tip_off {}{ BORDER-RIGHT: #deefpx solid; PADDING-RIGHT:px; BORDER-TOP: #deefpx solid; PADDING-LEFT:px; BACKGROUND: url(../images/blue/arr_tip_off.gif) #fff no-repeatpxpx; PADDING-BOTTOM:px; BORDER-LEFT: #deefpx solid; COLOR: #; PADDING-TOP:px; BORDER- BOTTOM: #deefpx solid } .tip_off {}{ PADDING-RIGHT:px; PADDING-LEFT:px; BACKGROUND: url (../images/blue/arr_tip_off.gif) #fff no-repeatpxpx; PADDING-BOTTOM:px; COLOR: #; PADDING-TOP:px } .tip_on {}{ BORDER-RIGHT: #px solid; PADDING-RIGHT:px; BORDER-TOP: #px solid; PADDING-LEFT:px; BACKGROUND: url(../images/blue/arr_tip_on.gif) #efde no-repeatpx px; PADDING-BOTTOM:px; BORDER-LEFT: #px solid; COLOR: #; PADDING-TOP:px; BORDER-BOTTOM: #px solid } .tip_on IMG {}{ VERTICAL-ALIGN: top } .tip_off IMG {}{ VERTICAL-ALIGN: top } .step_on {}{ PADDING-RIGHT:px; PADDING-LEFT:px; BACKGROUND: #fff; PADDING-BOTTOM:px; PADDING-TOP:px } .step_off {}{ PADDING-RIGHT:px; PADDING-LEFT:px; BACKGROUND: #fff; PADDING-BOTTOM:px; PADDING-TOP:px } .step_on .content_title {}{ COLOR: # } P {}{ MARGIN:pxpx; TEXT-INDENT:em } .btn_letter {}{ BORDER-LEFT-COLOR: #bebd; FILTER: progid:DXImageTransform.Microsoft.Gradient (GradientType=,StartColorStr=#ffffff, EndColorStr=#DDDCDC); BORDER-BOTTOM-COLOR: #cb; COLOR: #bc; BORDER-TOP-COLOR: #bebd; BORDER-RIGHT-COLOR: #cb } .btn_num {}{ BORDER-LEFT-COLOR: #ebff; FILTER: progid:DXImageTransform.Microsoft.Gradient (GradientType=, StartColorStr=#ffffff, EndColorStr=#BD); BORDER-BOTTOM-COLOR: #ebff; COLOR: black; BORDER-TOP-COLOR: #ebff; BORDER-RIGHT-COLOR: #ebff } 想还原事例，又怕麻烦的朋友，也可以留下Email,将发到您邮箱！水平有限，写不出多高深 和理论性较强的文章，只能发些实用的东西给大家. Ps:一周一博，工作太忙，时间太少！小键盘本地下载 下载此文件 大键盘本地下载 下载此文件 09-18 11:26