Wednesday, February 13, 2008, 11:49 AM - Scripts
Posted by Administrator
So you have a login, but you want your users to be able to see their password when they are entering it, if they want to - so, we need some JS for this. I have my core scripts:Posted by Administrator
function $(){eS=new Array();for (i=0;i<arguments.length;i++) {el=arguments[ i]; if (typeof el == 'string')
el=document.getElementById(el);if (arguments.length==1) return el; es.push(el);} return es;}
var gO= {addEvent: function(obj,evt, fn) {if (obj.addEventListener) {obj.addEventListener(evt, fn, false);
} else if (obj.attachEvent) {obj.attachEvent('on'+evt, fn);} else {obj['on'+evt]=fn;}},
fTarget: function(e) {var T;if (window.event && window.event.srcElement) {
T=window.event.srcElement;} else if (e && e.target) {T=e.target}if (!T) return null;return T;}}
Which handles the attaching and finding and event bubbling; now we need the meat of the script:
var rP={p:function(pw,cb) {rP.flist[rP.flist.length]=new rP.obj(pw,cb)},i:function() {
for (var i=0;i<rP.flist.length;i++) gO.addEvent($(rP.flist[ i].cb),"click",rP.sh);},
sh:function(e) {var xT=gO.fTarget(e);if (!xT) return;for (var i=0;i<rP.flist.length;i++) {
if (xT.id==rP.flist[ i].cb) {sT="text";if (rP.flist[ i].pos==0) {rP.flist[ i].pos=1;} else {
sT="password";rP.flist[ i].pos=0;}o=$(rP.flist[ i].pw);val=o.value;nfo=document.createElement("input");
nfo.setAttribute("type",sT);nfo.id=rP.flist[ i].pw+"_temp";nfo.value=val;o.parentNode.insertBefore(nfo, o);
o.parentNode.removeChild(o);$(nfo.id).setAttribute("id",nfo.id.replace("_temp",""));}}},obj:function(pw,cb)
{this.pw=pw;this.cb=cb;this.pos=0},flist:[]}
Then you need form elements on the page:
<form id="form1" name="form1" method="post" action="">
<input type="password" name="textfield" id="textfield" />
<br />
<input type="checkbox" name="checkbox" id="checkbox" value="checkbox" />
Reveal password
</form>
<form id="form2" name="form2" method="post" action="">
<input type="password" name="textfield2" id="textfield2" />
<br />
<input type="checkbox" name="checkbox2" id="checkbox2" value="checkbox" />
Reveal password
</form>
Then the magic, which you put below the JS in the HEAD of the document (listed above):
rP.p('textfield',"checkbox");
rP.p('textfield2',"checkbox2");
gO.addEvent(window,"load",rP.i);
The parameters are really simple, the rP.p line has two, per password on the page to reveal (as if someone would need more than one, but if I leave it out ... I know someone will ask...) The first (textfield on the first line) is the field for the password and the second one (checkbox) is the checkbox associated with the password field.
No JS on the form elements, gotta love it!
TESTED in FF v2.0.x and IE v7.0 and Safari v3 on PC




( 3 / 493 )

Calendar
