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弹出虚拟键盘修改密码的简单实例全部内容了，希望大家多多支持毛票票~