在遠方JS軟鍵盤

2024-09-05 12:22:44

字體：大中小

供稿：網(wǎng)友

JS版的軟鍵盤，在網(wǎng)銀或需要安全認證的地方一般會出現(xiàn)這種軟鍵盤，代碼還是很實用的，調(diào)用也方便。在遠方編寫，感謝作者奉獻。

<html><head><title>JS軟鍵盤密碼輸入器</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><style>BODY {SCROLLBAR-FACE-COLOR: #f0f0f6; FONT-SIZE: 9pt; BACKGROUND-ATTACHMENT: fixed; MARGIN: 0px; SCROLLBAR-HIGHLIGHT-COLOR: #f0f0f6; SCROLLBAR-SHADOW-COLOR: #f0f0f6; SCROLLBAR-3DLIGHT-COLOR: #6699cc; LINE-HEIGHT: normal; SCROLLBAR-ARROW-COLOR: #6699cc; SCROLLBAR-TRACK-COLOR: #6699cc; BACKGROUND-REPEAT: repeat; SCROLLBAR-DARKSHADOW-COLOR: #6699cc}.bold {	FONT-WEIGHT: bold; FONT-SIZE: 9pt; COLOR: #ffffff; LINE-HEIGHT: 180%;}TABLE {	FONT-SIZE: 9pt; LINE-HEIGHT: normal;}A:link {	COLOR: #0000ff; TEXT-DECORATION: none}A:visited {	COLOR: #0000ff; TEXT-DECORATION: none}A:hover {	COLOR: #ff0000}A:active {	COLOR: #ff0000}A.C:link {	COLOR: #ffffff; TEXT-DECORATION: none}A.C:visited {	COLOR: #ffffff; TEXT-DECORATION: none}A.C:hover {	COLOR: #ff0000}A.C:active {	COLOR: #ff0000}.textlogin {	BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 9pt; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid; HEIGHT: 18px; BACKGROUND-COLOR: #fafafa}.textarea {	BORDER-RIGHT: #003399 1px solid; BORDER-TOP: #003399 1px solid; BORDER-LEFT: #003399 1px solid; BORDER-BOTTOM: #003399 1px solid}</style><SCRIPT language=JavaScript>window.onload=function(){password1=null;initCalc();}var CapsLockValue=0;var check;self.onError=null;currentX = currentY = 0;  whichIt = null;           lastScrollX = 0; lastScrollY = 0;NS = (document.layers) ? 1 : 0;IE = (document.all) ? 1: 0;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 < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return true;else return false;}function grabIt(e) {check = false;if(IE) {whichIt = event.srcElement;while (whichIt.id.indexOf("softkeyboard") == -1) {whichIt = whichIt.parentElement;if (whichIt == null) { return true; } }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) {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;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;}document.write("<DIV align=center id=/"softkeyboard/" name=/"softkeyboard/" style=/"position:absolute; left:0px; top:0px; width:500px; 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 title=/"尊敬的客戶：為了保證網(wǎng)上交易安全,建議使用密碼輸入器輸入密碼!/" align=/"right/" valign=/"middle/" bgcolor=/"/" style=/"cursor: default;height:30/"><INPUT type=hidden value=/"/" name=password><INPUT type=hidden value=ok name=action2> <font style=/"font-size:13px;/">在遠方仿建行</font>  密碼輸入器                      <INPUT style=/"width:100px;height:20px;background-color:#54BAF1;/" type=button value=/"使用鍵盤輸入/" bgtype=/"1/" onclick=/"password1.readOnly=0;password1.focus();softkeyboard.style.display='none';password1.value='';/"><span style=/"width:2px;/"></span></td></tr><tr align=/"center/"><td align=/"center/" bgcolor=/"#FFFFFF/"><table align=/"center/" width=/"%/" border=/"0/" cellspacing=/"1/" cellpadding=/"0/"><tr align=/"left/" valign=/"middle/"><td><input type=button value=/" ~ /"></td><td><input type=button value=/" ! /"></td><td><input type=button  value=/" @ /"></td><td><input type=button value=/" # /"></td><td><input type=button value=/" $ /"></td><td><input type=button value=/" % /"></td><td><input type=button value=/" ^ /"></td><td><input type=button value=/" & /"></td><td><input type=button value=/" * /"></td><td><input type=button value=/" ( /"></td><td><input type=button value=/" ) /"></td><td><input type=button value=/" _ /"></td><td><input type=button value=/" + /"></td><td><input type=button value=/" | /"></td><td colspan=/"1/" rowspan=/"2/"><input name=/"button10/" type=button value=/" 退格/" onclick=/"setpassvalue();/"  onDblClick=/"setpassvalue();/" style=/"width:100px;height:42px/"></td></tr><tr align=/"left/" valign=/"middle/"><td><input type=button value=/" ` /"></td><td><input type=button value=/" 1 /"></td><td><input type=button value=/" 2 /"></td><td><input type=button value=/" 3 /"></td><td><input type=button value=/" 4 /"></td><td><input type=button value=/" 5 /"></td><td><input type=button value=/" 6 /"></td><td><input type=button value=/" 7 /"></td><td><input type=button value=/" 8 /"></td><td><input type=button value=/" 9 /"></td><td><input name=/"button6/" type=button value=/" 0 /"></td><td><input type=button value=/" - /"></td><td><input type=button value=/" = /"></td><td><input type=button value=/" // /"></td><td></td></tr><tr align=/"left/" valign=/"middle/"><td><input type=button value=/" q /"></td><td><input type=button value=/" w /"></td><td><input type=button value=/" e /"></td><td><input type=button value=/" r /"></td><td><input type=button value=/" t /"></td><td><input type=button value=/" y /"></td><td><input type=button value=/" u /"></td><td><input type=button value=/" i /"></td><td><input type=button value=/" o /"></td><td><input name=/"button8/" type=button value=/" p /"></td><td><input name=/"button9/" type=button value=/" { /"></td><td><input type=button value=/" } /"></td><td><input type=button value=/" [ /"></td><td><input type=button value=/" ] /"></td><td><input name=/"button9/" type=button onClick=/"capsLockText();setCapsLock();/" onDblClick=/"capsLockText();setCapsLock();/" value=/"切換大/小寫/" style=/"width:100px;/"></td></tr><tr align=/"left/" valign=/"middle/"><td><input type=button value=/" a /"></td><td><input type=button value=/" s /"></td><td><input type=button value=/" d /"></td><td><input type=button value=/" f /"></td><td><input type=button value=/" g /"></td><td><input type=button value=/" h /"></td><td><input type=button value=/" j /"></td><td><input name=/"button3/" type=button value=/" k /"></td><td><input name=/"button4/" type=button value=/" l /"></td><td><input name=/"button5/" type=button value=/" : /"></td><td><input name=/"button7/" type=button value=/" " /"></td><td><input type=button value=/" ; /"></td><td><input type=button value=/" ' /"></td><td rowspan=/"2/" colspan=/"2/"><input name=/"button12/" type=button onclick=/"OverInput();/" value=/"   確定  /" style=/"width:130px;height:42/"></td></tr><tr align=/"left/" valign=/"middle/"><td><input name=/"button2/" type=button value=/" z /"></td><td><input type=button value=/" x /"></td><td><input type=button value=/" c /"></td><td><input type=button value=/" v /"></td><td><input type=button value=/" b /"></td><td><input type=button value=/" n /"></td><td><input type=button value=/" m /"></td><td><input type=button value=/" < /"></td><td><input type=button value=/" > /"></td><td><input type=button value=/" ? /"></td><td><input type=button value=/" , /"></td><td><input type=button value=/" . /"></td><td><input type=button value=/" / /"></td></tr></table></td></FORM></tr></table></DIV>")function addValue(newValue){if (CapsLockValue==0){var str=Calc.password.value;if(str.length<password1.maxLength){Calc.password.value += newValue;}			if(str.length<=password1.maxLength){password1.value=Calc.password.value;}}else{var str=Calc.password.value;if(str.length<password1.maxLength){Calc.password.value += newValue.toUpperCase();}if(str.length<=password1.maxLength){password1.value=Calc.password.value;}}}function setpassvalue(){var longnum=Calc.password.value.length;var num;num=Calc.password.value.substr(0,longnum-1);Calc.password.value=num;var str=Calc.password.value;password1.value=Calc.password.value;}function OverInput(){var str=Calc.password.value;password1.value=Calc.password.value;softkeyboard.style.display="none";Calc.password.value="";password1.readOnly=1;}function showkeyboard(){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();}function setCapsLock(){if (CapsLockValue==0){CapsLockValue=1;}else{CapsLockValue=0;}}function setCalcborder(){CalcTable.style.border="1px solid #0090FD"}function setHead(){CalcTable.cells[0].style.backgroundColor="#7EDEFF"	}function setCalcButtonBg(){for(var i=0;i<Calc.elements.length;i++){if(Calc.elements[i].type=="button"&&Calc.elements[i].bgtype!="1"){Calc.elements[i].style.borderTopWidth= 0Calc.elements[i].style.borderRightWidth= 2Calc.elements[i].style.borderBottomWidth= 2Calc.elements[i].style.borderLeftWidth= 0Calc.elements[i].style.borderTopStyle= "none";Calc.elements[i].style.borderRightStyle= "solid";Calc.elements[i].style.borderBottomStyle= "solid";Calc.elements[i].style.borderLeftStyle= "none";Calc.elements[i].style.borderTopColor= "#118ACC";Calc.elements[i].style.borderRightColor= "#118ACC";Calc.elements[i].style.borderBottomColor= "#118ACC";Calc.elements[i].style.borderLeftColor= "#118ACC";Calc.elements[i].style.backgroundColor="#ADDEF8";var str1=Calc.elements[i].value;str1=str1.trim();var thisButtonValue=Calc.elements[i].value;thisButtonValue=thisButtonValue.trim();if(thisButtonValue.length==1){Calc.elements[i].onclick=function(){var thisButtonValue=this.value;thisButtonValue=thisButtonValue.trim();addValue(thisButtonValue);}Calc.elements[i].ondblclick=function(){var thisButtonValue=this.value;thisButtonValue=thisButtonValue.trim();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=0;i<Calc.elements.length;i++){var char=Calc.elements[i].value;var char=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(var i=0;i<Calc.elements.length;i++){var char=Calc.elements[i].value;var char=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;}</SCRIPT></head><body><BR><p align="center"><BR></p><center><table cellspacing="2" width="200" border="0">	<tr>		<td nowrap>請輸入帳號：</td>		<td nowrap colspan="3">		<input class="textlogin" title="證件號碼" maxlength="20" name="USERID" minlength="1"></td>	</tr>	<tr>		<td nowrap>請輸入密碼：</td>		<td nowrap colspan="3">		<input class="textlogin" id="LOGPASS" onkeydown="Calc.password.value=this.value" title="登錄密碼" onclick="password1=this;showkeyboard();this.readOnly=1;Calc.password.value=''" readonly type="text" maxlength="12" onchange="Calc.password.value=this.value" name="LOGPASS" minlength="6"></td>	</tr></table></center></body></html>

上一篇：Js文字公告切換代碼

下一篇：打開網(wǎng)頁自動打印的JS代碼