Jump to content

idle and focus on textfields.

fLaVV

By fLaVV
in Javascript Help

 Share

Recommended Posts

fLaVV Newbie

fLaVV

Posted
Posted

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.

Link to comment
https://forums.phpfreaks.com/topic/150513-idle-and-focus-on-textfields/
Share on other sites
Floydian Newbie

Floydian

Posted
Posted

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.

 

darkfreaks Advanced Member

darkfreaks

Posted
Posted

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 : '');
       }
    });
});

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.