大家可能在填写完用户名或者密码时因为某种原因未登录而离开，这时大家可能因为密码框的星号而麻痹大意：以为密码不会被窥视，而放心离开。但是有一种软件可以直接查看星号隐藏下的密码原文，这就带来些安全隐患。不过本脚本可以让你的表单的密码区躲开密码星号查看软件的查看。
原理：生成一个ID为随机的隐藏Input，通过onkeyup事件实时捕获按键，并且复制到这个隐藏的Input里，同时将原密码区的值以“*”号替换掉。发送表单时，将隐藏Input的密码原文复制到原密码区并且销毁这个ID随机的隐藏Input。
本文由胖子初发表于经典论坛 ，原帖地址：
http://bbs.blueidea.com/viewthread.php?tid=2789399
下面注解如果在描述上有什么不妥欢迎提出
/*
基于表单防止星号查看器的脚本
作者：oror@Blueidea
邮箱：pcn88#hotmail.com
网站：wangye.org
*/
var aKey=new Array();
//用于保存随机隐藏Input的ID值
var aPrt=new Array();
//用于保存所有受保护Input的name值
var szFrm;
//用于保存表单名
frmProt={
/*
获得ID对应对象
szID：[字符串]对象ID属性
*/
$:function (szID){
return document.getElementById(szID);
},
/*
获得表单域对象
szFrmName：[字符串]表单的name值
*/
$v:function (szFrmName){
return document.forms[szFrmName];
},
/*
获得表单域的Input标签对象
szName：[字符串]标签的name值
szFrmName：[字符串]表单的name值
*/
$f:function (szName,szFrmName){
return frmProt.$v(szFrmName).elements[szName];
},
/*
绑定事件
obj：[OBJECT]对象
evn：[字符串]事件名称
f：函数
*/
fAttach:function (obj,evn,f){
if(!obj)return ;
if(obj.attachEvent){
obj.attachEvent("on"+evn,f);
}
if(obj.addEventListener){
obj.addEventListener(evn,f,false);
}
},
/*
获得随机数字
dwIn：[数字]随机范围
*/
fRand:function (dwIn){
return Math.floor(Math.random()*dwIn);
},
/*
获得随机字母与数字组合
dwLen：[数字]返回值长度
*/
fRandom:function (dwLen){
var dwDx,szResult="",szTmp;
var aMySd=new Array();
//建立数组用于保存随机字符，这里分成3组
aMySd[0]="abcdefghijklmnopqrstuvwxyz";
//第一组[0]：小写字母
aMySd[1]="0987654321";
//第二组[1]：数字
aMySd[2]=aMySd[0].toUpperCase();
//第三组[2]：大写字母
for(var i=0;i<dwLen;i++){
//依长度循环
dwDx=frmProt.fRand(3);
//获得一个随机数，范围0~2
szTmp=aMySd[dwDx];
//取出一组
szResult+=szTmp.substr(frmProt.fRand(szTmp.length),1);
//随机取出这一组中某个字符
}
return szResult;
},
/*
建立标签函数
szTarget：[字符串]父标签。生成的新标签将置于其中
szType：[字符串]要生成的标签类型
aProp：[数组]属性设置，如 Array("type=text","size=20")
*/
fCreateTarget:function (szTarget,szType,aProp){
var aTmp;
var objLocation=frmProt.$v(szTarget);
//获得父标签对象
var objPreCreate=document.createElement(szType);
//初始标签
for(var i=0;i<aProp.length;i++){
//设置属性循环开始
aTmp=aProp[i].split("=");
//按=号分开
if(aTmp.length<2){
//注意为避免设置错误，这里做个判断
alert("错误的属性值设定");
return ;
}
objPreCreate.setAttribute(aTmp[0],aTmp[1]);
//设置属性
}
objLocation.appendChild(objPreCreate);
//建立这个标签
},
/*
销毁标签
szTarget:[字符串]要销毁标签的父标签
szID：[字符串]要销毁标签ID
*/
fRemoveTarget:function (szTarget,szID){
var objLocation=frmProt.$v(szTarget);
//获得父标签对象
objLocation.removeChild(frmProt.$(szID));
},
/*
创建隐藏Input标签
szBase：[字符串]父标签。生成的Input标签将置于其中
szName：[字符串]Input标签的name属性
*/
fCreateHidden:function (szBase,szName){
var aHide=new Array("type=hidden","id="+szName,"value=");
//设置属性
frmProt.fCreateTarget(szBase,"input",aHide);
//调用fCreateTarget创建
},
/*获得event事件，主要为了兼容FireFox浏览器*/
fGetEvent:function (){
var objCaller=frmProt.fGetEvent.caller;
var objEvent,objResult=null;
while(objCaller!=null)
{
objEvent=objCaller.arguments[0];
if(objEvent)objResult=objEvent;
objCaller=objCaller.caller;
}
return objResult;
},
/*
获得按键
*/
fGetKey:function (){
var e=frmProt.fGetEvent();
var dwKey=window.event?e.keyCode:e.which;
return dwKey;
},
/*
入口函数
szFrmName：[字符串]表单名
szProtName：[字符串]要保护的Input名，格式 "password|password2" 多个请用"|"分开
*/
Init:function (szFrmName,szProtName){
aPrt=szProtName.split("|");
//将受保护Input名分组
var dwGetLen=aPrt.length;
//获得分组长度
var objPas;
if(dwGetLen<1)return ;
//如果长度为0则中止
for(var i=0;i<dwGetLen;i++){
//循环
aKey[i]=frmProt.fRandom(frmProt.fRand(64)+1);
//随机英文和数字，长度范围1~63
frmProt.fCreateHidden(szFrmName,aKey[i]);
//创建隐藏Input表单
objPas=frmProt.$f(aPrt[i],szFrmName);
//获得受保护Input对象
if(objPas==null)return ;
//获取失败，则中止
objPas.value="";
frmProt.fAttach(objPas,"keyup",frmProt.fTask);
//绑定onkeyup事件到受保护Input
}
frmProt.fAttach(frmProt.$v(szFrmName),"submit",frmProt.fSub);
//绑定onsubmit到form表单
szFrm=szFrmName;
//将传入的表单名赋给全局变量
},
//提交表单触发函数：将隐藏Input的内容复制到受保护Input里，销毁隐藏Input
fSub:function (){
for(var i=0;i<aPrt.length;i++){
frmProt.$f(aPrt[i],szFrm).value=frmProt.$(aKey[i]).value;
//将隐藏Input的内容复制到受保护Input里
frmProt.fRemoveTarget(szFrm,aKey[i]);
//销毁隐藏Input
}
return true;
},
//Input实时保护函数
fTask:function (){
var dwKeyCode,szPrt,szOrg,szTemp,dwSta,szA,szB,objMouse;
dwKeyCode=frmProt.fGetKey();
if(dwKeyCode!=37&&dwKeyCode!=39){
//判断并且过滤掉光标左右移动按键，否则光标会受selection.createRange影响
for(var i=0;i<aPrt.length;i++){
if(!frmProt.$(aKey[i])){
//判断一下隐藏Input是否存在。
alert("隐藏域已经销毁，请重新加载本页！");
return ;
}
szPrt=frmProt.$f(aPrt[i],szFrm).value;
//得到受保护Input的Value值
szOrg=frmProt.$(aKey[i]).value;
//得到隐藏Input的Value值
if(szPrt!=""){
//如果不为空
dwSta=szOrg.length-szPrt.length;
if(dwSta==1){
//这里主要判断删除字符
if(document.all){
//IE
objMouse=document.selection.createRange();
//作用：定位光标
objMouse.setEndPoint("StartToStart",frmProt.$f(aPrt[i],szFrm).createTextRange());
dwSta=objMouse.text.length;
//获得光标的位置
}else {
//FireFox
objMouse=frmProt.$f(aPrt[i],szFrm).selectionStart;
dwSta=objMouse;
}
szA=szOrg.substr(0,dwSta);
//从第一个字符截取到光标位置长度的字符串。
szB=szOrg.substr(dwSta+1,szOrg.length);
//从光标位置并且跳掉一个字符截取到整个字符串长度的字符，这里实现删除字符。
frmProt.$(aKey[i]).value=szA+szB;
//组成新的字符串并拷贝到隐藏的Input
}else if(dwSta>1){
//这里由于无法对于连续删除按键进行判断，于是发现用户这样操作，则重置表单
frmProt.$(aKey[i]).value="";
frmProt.$f(aPrt[i],szFrm).value="";
}else {
szTemp=szPrt.replace(/\*/g,"");
//替换掉所有*获得插入字符
dwSta=szPrt.indexOf(szTemp);
//判断最新插入字符的位置
szA=szOrg.substr(0,dwSta);
//从第一个字符截取到这个插入字符的位置
szB=szOrg.substr(dwSta,szPrt.length);
//从这个插入字符位置截取到字符串最后
frmProt.$(aKey[i]).value=szA+szTemp+szB;
//组成新的字符串并拷贝到隐藏的Input
frmProt.$f(aPrt[i],szFrm).value=szPrt.replace(/./ig,"*");
//替换掉受保护Input的值为*
}
}else {
frmProt.$(aKey[i]).value="";
//如果受保护Input值为空，清空隐藏Input的值
}
}
}
}
}
调用方式
window.onload=function(){
frmProt.Init("表单名","要保护的密码区域，多个请用‘|’分隔");
}
测试接收的ASP
Dim szFrm For Each szFrm In Request.Form Response.Write szFrm & "=" & Request.Form(szFrm) & "<br />" Next
林三:
沙扬娜拉:
小众博客:
评论标签很有意思哦。
陈大猫:
昨夜星辰:
我看了你说的那个google上的，可是我还是不会修改，能不能麻烦博主说的详细一些啊！谢谢了…
2008-09-17 09:56这个代码的显示效果很不错，怎么在PJBlog显示这种效果啊？
2008-09-16 08:02