js 弹出虚拟键盘修改密码的简单实例
实例如下:
//定义当前是否大写的状态 window.onload= function() { password1=null; initCalc(); } varCapsLockValue=0; varcheck; functionsetVariables(){ tablewidth=630;//logowidth,inpixels tableheight=20;//logoheight,inpixels 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"; } } functioncheckLocation(){ if(check){ objectXY="softkeyboard"; varavailableX=eval(innerW); varavailableY=eval(innerH); varcurrentX=eval(offsetX); varcurrentY=eval(offsetY); x=availableX-tablewidth+currentX; //y=availableY-tableheight+currentY; y=currentY; evalMove(); } setTimeout("checkLocation()",0); } functionevalMove(){ //eval(docStyle+objectXY+styleDoc+horz+"="+x); eval(docStyle+objectXY+styleDoc+vert+"="+y); } self.onError=null; currentX=currentY=0; whichIt=null; lastScrollX=0;lastScrollY=0; NS=(document.layers)?1:0; IE=(document.all)?1:0; functionheartBeat(){ if(IE){diffY=document.body.scrollTop;diffX=document.body.scrollLeft;} if(NS){diffY=self.pageYOffset;diffX=self.pageXOffset;} if(diffY!=lastScrollY){ percent=.1*(diffY-lastScrollY); if(percent>0)percent=Math.ceil(percent); elsepercent=Math.floor(percent); if(IE)document.all.softkeyboard.style.pixelTop+=percent; if(NS)document.softkeyboard.top+=percent; lastScrollY=lastScrollY+percent;} if(diffX!=lastScrollX){ percent=.1*(diffX-lastScrollX); if(percent>0)percent=Math.ceil(percent); elsepercent=Math.floor(percent); if(IE)document.all.softkeyboard.style.pixelLeft+=percent; if(NS)document.softkeyboard.left+=percent; lastScrollX=lastScrollX+percent;}} functioncheckFocus(x,y){ stalkerx=document.softkeyboard.pageX; stalkery=document.softkeyboard.pageY; stalkerwidth=document.softkeyboard.clip.width; stalkerheight=document.softkeyboard.clip.height; if((x>stalkerx&&x<(stalkerx+stalkerwidth))&&(y>stalkery&&y<(stalkery+stalkerheight)))returntrue; elsereturnfalse;} functiongrabIt(e){ check=false; if(IE){ whichIt=event.srcElement; while(whichIt.id.indexOf("softkeyboard")==-1){ whichIt=whichIt.parentElement; if(whichIt==null){returntrue;}} 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;}} returntrue;} functionmoveIt(e){ if(whichIt==null){returnfalse;} if(IE){ 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)whichIt.style.pixelTop=document.body.scrollTop; if(whichIt.style.pixelLeft<document.body.scrollLeft)whichIt.style.pixelLeft=document.body.scrollLeft; if(whichIt.style.pixelLeft>document.body.offsetWidth-document.body.scrollLeft-whichIt.style.pixelWidth-20)whichIt.style.pixelLeft=document.body.offsetWidth-whichIt.style.pixelWidth-20; if(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; event.returnValue=false; }else{ whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY); if(whichIt.left<0+self.pageXOffset)whichIt.left=0+self.pageXOffset; if(whichIt.top<0+self.pageYOffset)whichIt.top=0+self.pageYOffset; if((whichIt.left+whichIt.clip.width)>=(window.innerWidth+self.pageXOffset-17))whichIt.left=((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17; if((whichIt.top+whichIt.clip.height)>=(window.innerHeight+self.pageYOffset-17))whichIt.top=((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17; returnfalse;} returnfalse;} functiondropIt(){whichIt=null; if(NS)window.releaseEvents(Event.MOUSEMOVE); returntrue;} 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;} //if(NS||IE)action=window.setInterval("heartBeat()",1); document.write("<DIValign=centerid=\"softkeyboard\"name=\"softkeyboard\"style=\"position:absolute;left:0px;top:0px;width:500px;z-index:180;display:none\"><tableid=\"CalcTable\"width=\"\"border=\"0\"align=\"center\"cellpadding=\"0\"cellspacing=\"0\"bgcolor=\"\"><FORMid=Calcname=Calcaction=\"\"method=postautocomplete=\"off\"><tr><tdtitle=\"为保证后台登陆安全,建议使用输入器输入帐号密码\"align=\"right\"valign=\"middle\"bgcolor=\"\"style=\"cursor:default;height:30\"><INPUTtype=hiddenvalue=\"\"name=password><INPUTtype=hiddenvalue=okname=action2> <fontstyle=\"font-size:13px;\">-+-www.soojs.com㊣后台管理帐号密码输入器-+-</font>           <INPUTstyle=\"width:100px;height:20px;background-color:#54BAF1;\"type=buttonvalue=\"使用键盘输入\"bgtype=\"1\"onclick=\"password1.readOnly=0;password1.focus();softkeyboard.style.display='none';password1.value='';\"><spanstyle=\"width:2px;\"></span></td></tr><tralign=\"center\"><tdalign=\"center\"bgcolor=\"#FFFFFF\"><tablealign=\"center\"width=\"%\"border=\"0\"cellspacing=\"1\"cellpadding=\"0\">\n<tralign=\"left\"valign=\"middle\">\n<td><inputtype=buttonvalue=\"~\"></td>\n<td><inputtype=buttonvalue=\"!\"></td>\n<td><inputtype=buttonvalue=\"@\"></td>\n<td><inputtype=buttonvalue=\"#\"></td>\n<td><inputtype=buttonvalue=\"$\"></td>\n<td><inputtype=buttonvalue=\"%\"></td>\n<td><inputtype=buttonvalue=\"^\"></td>\n<td><inputtype=buttonvalue=\"&\"></td>\n<td><inputtype=buttonvalue=\"*\"></td>\n<td><inputtype=buttonvalue=\"(\"></td>\n<td><inputtype=buttonvalue=\")\"></td>\n<td><inputtype=buttonvalue=\"_\"></td>\n<td><inputtype=buttonvalue=\"+\"></td>\n<td><inputtype=buttonvalue=\"|\"></td>\n<tdcolspan=\"1\"rowspan=\"2\"><inputname=\"button10\"type=buttonvalue=\"退格\"onclick=\"setpassvalue();\"onDblClick=\"setpassvalue();\"style=\"width:100px;height:42px\">\n</td>\n</tr>\n<tralign=\"left\"valign=\"middle\">\n<td><inputtype=buttonvalue=\"`\"></td>\n<td><inputtype=buttonvalue=\"1\"></td>\n<td><inputtype=buttonvalue=\"2\"></td>\n<td><inputtype=buttonvalue=\"3\"></td>\n<td><inputtype=buttonvalue=\"4\"></td>\n<td><inputtype=buttonvalue=\"5\"></td>\n<td><inputtype=buttonvalue=\"6\"></td>\n<td><inputtype=buttonvalue=\"7\"></td>\n<td><inputtype=buttonvalue=\"8\"></td>\n<td><inputtype=buttonvalue=\"9\"></td>\n<td><inputname=\"button6\"type=buttonvalue=\"0\"></td>\n<td><inputtype=buttonvalue=\"-\"></td>\n<td><inputtype=buttonvalue=\"=\"></td>\n<td><inputtype=buttonvalue=\"\\\"></td>\n<td></td>\n</tr>\n<tralign=\"left\"valign=\"middle\">\n<td><inputtype=buttonvalue=\"q\"></td>\n<td><inputtype=buttonvalue=\"w\"></td>\n<td><inputtype=buttonvalue=\"e\"></td>\n<td><inputtype=buttonvalue=\"r\"></td>\n<td><inputtype=buttonvalue=\"t\"></td>\n<td><inputtype=buttonvalue=\"y\"></td>\n<td><inputtype=buttonvalue=\"u\"></td>\n<td><inputtype=buttonvalue=\"i\"></td>\n<td><inputtype=buttonvalue=\"o\"></td>\n<td><inputname=\"button8\"type=buttonvalue=\"p\"></td>\n<td><inputname=\"button9\"type=buttonvalue=\"{\"></td>\n<td><inputtype=buttonvalue=\"}\"></td>\n<td><inputtype=buttonvalue=\"[\"></td>\n<td><inputtype=buttonvalue=\"]\"></td>\n<td><inputname=\"button9\"type=buttononClick=\"capsLockText();setCapsLock();\"onDblClick=\"capsLockText();setCapsLock();\"value=\"切换大/小写\"style=\"width:100px;\"></td>\n</tr>\n<tralign=\"left\"valign=\"middle\">\n<td><inputtype=buttonvalue=\"a\"></td>\n<td><inputtype=buttonvalue=\"s\"></td>\n<td><inputtype=buttonvalue=\"d\"></td>\n<td><inputtype=buttonvalue=\"f\"></td>\n<td><inputtype=buttonvalue=\"g\"></td>\n<td><inputtype=buttonvalue=\"h\"></td>\n<td><inputtype=buttonvalue=\"j\"></td>\n<td><inputname=\"button3\"type=buttonvalue=\"k\"></td>\n<td><inputname=\"button4\"type=buttonvalue=\"l\"></td>\n<td><inputname=\"button5\"type=buttonvalue=\":\"></td>\n<td><inputname=\"button7\"type=buttonvalue=\""\"></td>\n<td><inputtype=buttonvalue=\";\"></td>\n<td><inputtype=buttonvalue=\"'\"></td>\n<tdrowspan=\"2\"colspan=\"2\"><inputname=\"button12\"type=buttononclick=\"OverInput();\"value=\"确定\"style=\"width:130px;height:42\"></td>\n</tr>\n<tralign=\"left\"valign=\"middle\">\n<td><inputname=\"button2\"type=buttonvalue=\"z\"></td>\n<td><inputtype=buttonvalue=\"x\"></td>\n<td><inputtype=buttonvalue=\"c\"></td>\n<td><inputtype=buttonvalue=\"v\"></td>\n<td><inputtype=buttonvalue=\"b\"></td>\n<td><inputtype=buttonvalue=\"n\"></td>\n<td><inputtype=buttonvalue=\"m\"></td>\n<td><inputtype=buttonvalue=\"<\"></td>\n<td><inputtype=buttonvalue=\">\"></td>\n<td><inputtype=buttonvalue=\"?\"></td>\n<td><inputtype=buttonvalue=\",\"></td>\n<td><inputtype=buttonvalue=\".\"></td>\n<td><inputtype=buttonvalue=\"/\"></td>\n</tr>\n</table></td></FORM></tr></table></DIV>") //给输入的密码框添加新值 functionaddValue(newValue) { if(CapsLockValue==0) { varstr=Calc.password.value; if(str.length<password1.maxLength) { Calc.password.value+=newValue; } if(str.length<=password1.maxLength) { password1.value=Calc.password.value; } } else { varstr=Calc.password.value; if(str.length<password1.maxLength) { Calc.password.value+=newValue.toUpperCase(); } if(str.length<=password1.maxLength) { password1.value=Calc.password.value; } } } //实现BackSpace键的功能 functionsetpassvalue() { varlongnum=Calc.password.value.length; varnum num=Calc.password.value.substr(0,longnum-1); Calc.password.value=num; varstr=Calc.password.value; password1.value=Calc.password.value; } //输入完毕 functionOverInput() { //m_pass.mempass.value=Calc.password.value; varstr=Calc.password.value; password1.value=Calc.password.value; //alert(theForm.value); //theForm.value=m_pass.mempass.value; softkeyboard.style.display="none"; Calc.password.value=""; password1.readOnly=1; //password1.value=Calc.password.value; } //关闭软键盘 functionclosekeyboard(theForm) { //eval("vartheForm="+theForm+";"); //theForm.value=""; softkeyboard.style.display="none"; //Calc.password.value=""; } //显示软键盘 functionshowkeyboard() { if(event.y+140) softkeyboard.style.top=event.y+document.body.scrollTop+15; if((event.x-250)>0) { softkeyboard.style.left=event.x-250; } else { softkeyboard.style.left=0; } softkeyboard.style.display="block"; password1.readOnly=1; password1.blur(); //password1.value=""; } //设置是否大写的值 functionsetCapsLock() { if(CapsLockValue==0) { CapsLockValue=1 //Calc.showCapsLockValue.value="当前是大写"; } else { CapsLockValue=0 //Calc.showCapsLockValue.value="当前是小写"; } } functionsetCalcborder() { CalcTable.style.border="1pxsolid#0090FD" } functionsetHead() { CalcTable.cells[0].style.backgroundColor="#7EDEFF" } functionsetCalcButtonBg() { for(vari=0;i<Calc.elements.length;i++) { if(Calc.elements[i].type=="button"&&Calc.elements[i].bgtype!="1") { //if(i==10) //alert(123); Calc.elements[i].style.borderTopWidth=0 Calc.elements[i].style.borderRightWidth=2 Calc.elements[i].style.borderBottomWidth=2 Calc.elements[i].style.borderLeftWidth=0 Calc.elements[i].style.borderTopStyle="none"; Calc.elements[i].style.borderRightStyle="solid"; Calc.elements[i].style.borderBottomStyle="solid"; Calc.elements[i].style.borderLeftStyle="none"; //#46AC17 Calc.elements[i].style.borderTopColor="#118ACC"; Calc.elements[i].style.borderRightColor="#118ACC"; Calc.elements[i].style.borderBottomColor="#118ACC"; Calc.elements[i].style.borderLeftColor="#118ACC"; //#CBF3B2 Calc.elements[i].style.backgroundColor="#ADDEF8"; varstr1=Calc.elements[i].value; str1=str1.trim(); /* if(str1=="`") { Calc.elements[i].style.fontSize=14; } */ if(str1.length==1) { //Calc.elements[i].style.fontSize=16; //Calc.elements[i].style.fontWeight='bold'; } varthisButtonValue=Calc.elements[i].value; thisButtonValue=thisButtonValue.trim(); if(thisButtonValue.length==1) { Calc.elements[i].onclick= function() { varthisButtonValue=this.value; thisButtonValue=thisButtonValue.trim(); addValue(thisButtonValue); //alert(234) } Calc.elements[i].ondblclick= function() { varthisButtonValue=this.value; thisButtonValue=thisButtonValue.trim(); addValue(thisButtonValue); //alert(234) } } } } } functioninitCalc() { setCalcborder(); setHead(); setCalcButtonBg(); } String.prototype.trim=function() { //用正则表达式将前后空格 //用空字符串替代。 returnthis.replace(/(^\s*)|(\s*$)/g,""); } varcapsLockFlag; capsLockFlag=true; functioncapsLockText() { if(capsLockFlag)//改成大写 { for(vari=0;i<Calc.elements.length;i++) { varchar=Calc.elements[i].value; varchar=char.trim() if(Calc.elements[i].type=="button"&&char>="a"&&char<="z"&&char.length==1) { Calc.elements[i].value=""+String.fromCharCode(char.charCodeAt(0)-32)+"" } } } else { for(vari=0;i<Calc.elements.length;i++) { varchar=Calc.elements[i].value; varchar=char.trim() if(Calc.elements[i].type=="button"&&char>="A"&&char<="Z"&&char.length==1) { Calc.elements[i].value=""+String.fromCharCode(char.charCodeAt(0)+32)+"" } } } capsLockFlag=!capsLockFlag; }
以上就是小编为大家带来的js弹出虚拟键盘修改密码的简单实例全部内容了,希望大家多多支持毛票票~