fLaVV Posted March 21, 2009 Share Posted March 21, 2009 What I'm trying to do here is make it when you view the page, the two textboxes (one is username, other is password) have default values for them, they would be Username and Password. I currently have them where when you click in the textfields, the default values are removed and the style of the textfield changes. Now the problem I am having is making the password box display "Password" until the user focuses on the box, then it will remove "Password" (making the field blank) then when a user starts typing the password, displaying it in asterix (******). I have both of these functions working on there own, but cannot seem to get them to work together, here is the code I am currently using: <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function changeBox() { document.getElementById('div1').style.display='none'; document.getElementById('div2').style.display=''; document.getElementById('password').focus(); } function restoreBox() { if(document.getElementById('password').value=='') { document.getElementById('div1').style.display=''; document.getElementById('div2').style.display='none'; } } $(document).ready(function() { $('input[type="text"]').addClass("idleField"); $('input[type="text"]').focus(function() { $(this).removeClass("idleField").addClass("focusField"); if (this.value == this.defaultValue){ this.value = ''; } if(this.value != this.defaultValue){ this.select(); } }); $('input[type="text"]').blur(function() { $(this).removeClass("focusField").addClass("idleField"); if ($.trim(this.value == '')){ this.value = (this.defaultValue ? this.defaultValue : ''); } }); }); --> </script> And the HTML for the forms: <form action="login.php" method="post"> <center> <label for="username"></label> <input name="username" id="username" class="textfield" type="text" value="" size="20" maxlength="20" /> <br /> <div id="div1"> <input name="pass_temp" class="textfield" type="text" value="Password" size="20" maxlength="20" onfocus="changeBox()" /> </div> <div id="div2" style="display:none"> <input name="password" class="textfield" id="password" type="password" value="" size="20" maxlength="20" onBlur="restoreBox()" /> </div> <br /> <input name="submit" type="submit" class="button" id="submit" value="Log In" /> <input name="reset" type="reset" class="button" id="reset" value="Reset" /> </center></form> the problem is the password field. If i take the focus script out, when i click in the field "Password" will disappear, and any entered text will become ******. However when I add the focus part in, it will only display "pass_temp" field (cause its a textfield) and clicking in it, no longer changes the text to ***** So my question would be, how can I make the password field change when focused and at the sametime, whatever is entered into the field, will still be ****** Here is the complete HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Fragged Out :: When You All Fragged Out!</title> <style type="text/css"> <!-- body,td,th { color: #FFFFFF; } body { background-color: #232323; margin-left: 0px; margin-top: 0px; } .textfield { font-family: Verdana, Arial, Helvetica, sans-serif; background-color: #666666; border: thin dashed #000000; font-size: 12px; text-align: center; color: #FFFFFF; font-weight: bold; } .button { background-color: #666666; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; border: thin solid #000000; } .focusField{ border: thin dashed #000000; background:#999999; color: #000000; } .idleField{ background:#333333; color: #6F6F6F; border: thin dashed #000000; } td.off { } td.on { background: #333333; } --> </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } function changeBox() { document.getElementById('div1').style.display='none'; document.getElementById('div2').style.display=''; document.getElementById('password').focus(); } function restoreBox() { if(document.getElementById('password').value=='') { document.getElementById('div1').style.display=''; document.getElementById('div2').style.display='none'; } } $(document).ready(function() { $('input[type="text"]').addClass("idleField"); $('input[type="text"]').focus(function() { $(this).removeClass("idleField").addClass("focusField"); if (this.value == this.defaultValue){ this.value = ''; } if(this.value != this.defaultValue){ this.select(); } }); $('input[type="text"]').blur(function() { $(this).removeClass("focusField").addClass("idleField"); if ($.trim(this.value == '')){ this.value = (this.defaultValue ? this.defaultValue : ''); } }); }); --> </script> </head><body onload="MM_preloadImages('images/home_over.jpg','images/forums_over.jpg','images/contacts_over.jpg','images/usercp_over.jpg','images/downloads_over.jpg','images/members_over.jpg')"> <table width="951" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td><img src="images/header.jpg" width="951" height="173" /></td> </tr> <tr> <td><img src="images/nav_left.jpg" width="49" height="66" /><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/home_over.jpg',1)"><img src="images/home.jpg" alt="Home" name="home" width="100" height="66" border="0" id="home" /></a><a href="forums.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('forums','','images/forums_over.jpg',1)"><img src="images/forums.jpg" alt="Forums" name="forums" width="124" height="66" border="0" id="forums" /></a><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/contacts_over.jpg',1)"><img src="images/contacts.jpg" alt="Contact Staff" name="contact" width="144" height="66" border="0" id="contact" /></a><a href="usercp.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('usercp','','images/usercp_over.jpg',1)"><img src="images/usercp.jpg" alt="User Control Panel" name="usercp" width="172" height="66" border="0" id="usercp" /></a><a href="downloads.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('downloads','','images/downloads_over.jpg',1)"><img src="images/downloads.jpg" alt="Downloads" name="downloads" width="167" height="66" border="0" id="downloads" /></a><a href="members.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('members','','images/members_over.jpg',1)"><img src="images/members.jpg" alt="Site Members" name="members" width="148" height="66" border="0" id="members" /></a><img src="images/nav_right.jpg" width="47" height="66" /></td> </tr> </table><br /> <table width="951" height="100%" border="0" align="center" cellpadding="0" cellspacing="0" background="images/main_bg2.jpg"> <tr> <td width="1" valign="top"> <table width="951" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="233" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="29" background="images/left_nav.jpg"><div align="center">Navigation Menu</div></td> </tr> <tr> <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="2"></td> <td valign="top"><table width="98%" border="0" align="center" cellpadding="1" cellspacing="1"> <tr> <td class="off" onmouseover="this.className='on'" onmouseout="this.className='off'">Home</td> </tr> <tr> <td>Downloads</td> </tr> <tr> <td>Members</td> </tr> <tr> <td>Forums</td> </tr> <tr> <td>Contacts</td> </tr> </table></td> </tr> </table></td> </tr> <tr> <td><img src="images/left_nav_footer.jpg" width="233" height="13" /></td> </tr> </table></td> <td width="476" valign="top"> <table width="100%" height="33%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="29" background="images/center_content.jpg"><div align="center">Page Content</div></td> </tr> <tr> <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="14"></td> <td>Content</td> </tr> </table></td> </tr> <tr> <td><img src="images/center_content_footer.jpg" width="476" height="13" /></td> </tr> </table></td> <td width="242" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="29" background="images/right_nav.jpg"><div align="center">User Login</div></td> </tr> <tr> <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="14"></td> <td><table width="100%" border="0" cellspacing="1" cellpadding="1"> <tr> <td valign="top"> <form action="login.php" method="post"> <center> <label for="username"></label> <input name="username" id="username" class="textfield" type="text" value="" size="20" maxlength="20" /> <br /> <div id="div1"> <input name="pass_temp" class="textfield" type="text" value="Password" size="20" maxlength="20" onfocus="changeBox()" /> </div> <div id="div2" style="display:none"> <input name="password" class="textfield" id="password" type="password" value="" size="20" maxlength="20" onBlur="restoreBox()" /> </div> <br /> <input name="submit" type="submit" class="button" id="submit" value="Log In" /> <input name="reset" type="reset" class="button" id="reset" value="Reset" /> </center></form> </td> </tr> </table></td> </tr> </table></td> </tr> <tr> <td><img src="images/right_footer.jpg" width="242" height="13" /></td> </tr> </table></td> </tr> </table></td> </tr> </table> </body> </html> I tried to explain the best I could, any help would be grateful. Let me know if you need any more information. Quote Link to comment Share on other sites More sharing options...
Floydian Posted March 22, 2009 Share Posted March 22, 2009 this may not be very cross browser friendly, but it's worth a shot. inputElement.type = 'password'; or inputElement.type = 'text'; That may be a read only property though, but give it a shot. If that doesn't do it, you can swap out the input for another one. The user wouldn't even know the elements are being swapped out. Swapping out the elements would be a little tricky, but doable. Quote Link to comment Share on other sites More sharing options...
darkfreaks Posted March 22, 2009 Share Posted March 22, 2009 Changed == to ===: function changeBox() { document.getElementById('div1').style.display='none'; document.getElementById('div2').style.display=''; document.getElementById('password').focus(); } function restoreBox() { if(document.getElementById('password').value==='') { document.getElementById('div1').style.display=''; document.getElementById('div2').style.display='none'; } } $(document).ready(function() { $('input[type="text"]').addClass("idleField"); $('input[type="text"]').focus(function() { $(this).removeClass("idleField").addClass("focusField"); if (this.value == this.defaultValue){ this.value = ''; } if(this.value != this.defaultValue){ this.select(); } }); $('input[type="text"]').blur(function() { $(this).removeClass("focusField").addClass("idleField"); if ($.trim(this.value === '')){ this.value = (this.defaultValue ? this.defaultValue : ''); } }); }); Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.