0顶

仿银行软键盘密码输入效果

稿源：互联网 2022-07-15 12:38:14 点击： 2147 撤稿纠错

通过js模仿软键盘输入效果，您可以自定义样式。

以下讨论的是和相关的仿银行软键盘密码输入效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>仿建设银行软键盘密码输入器，sky整理收集，站长特效欢迎您。</title>

<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; FONT-FAMILY: 宋体; SCROLLBAR-DARKSHADOW-COLOR: #6699cc
}
.bold {
	FONT-WEIGHT: bold; FONT-SIZE: 9pt; COLOR: #ffffff; LINE-HEIGHT: 180%; FONT-FAMILY: 宋体
}
TABLE {
	FONT-SIZE: 9pt; LINE-HEIGHT: normal; FONT-FAMILY: 宋体
}
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;
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
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;
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
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="尊敬的客户：为了保证网上交易安全,建议使用密码输入器输入密码!" 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;}}
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
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()
{//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
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= 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";
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();
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
String.prototype.trim = function(){return this.replace(/(^s*)|(s*$)/g, "");}
var capsLockFlag;
capsLockFlag=true;
function capsLockText()
{//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
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>
<a href="<#ZC_BLOG_HOST#>">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

<div align="center">
	<table border="0" width="500" id="table1">
		<tr>
			<td>
			<p style="line-height: 150%"><a href="http://www.zzjs.net">站长特效网</a> 打造国内最帅的网页特效站。</td>
		</tr>
	</table>
</div>
<p align="center">
<BR>

关于仿银行软键盘密码输入效果的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2016384063212.shtml方便下次再访问哦。

·上一篇： js设置并读取cookie效果
·下一篇： 给网页设置热键效果

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

仿银行软键盘密码输入效果

文章分类LIST >>返回首页

最新游戏

最新新闻