Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations bkrike on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Text box values

Status
Not open for further replies.
GezH

GezH

Programmer
Aug 7, 2002
68
Hi all. I have a text input box, where we have some preset text value. When the user clicks in the box, the text disappears and they are free to write what they want, as below:

<input name="content" type="text" size="20" value="enter text" onclick="javascript:content.value=''" />

Easy right? But what if the textfield is a 'password' style, and we want to say 'enter password'? The text is displayed as asterixes!

Any advice appreciated!
 
Sort by date Sort by votes
I cannot say that I find it a very beautiful solution
and I don't know if you'll run into difficulties with it
but here's a way:

Code: 
<HTML>
<HEAD>
<TITLE>  </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function changes(a) {
X=document.getElementById("MyInput")
X.innerHTML="<input name='content' type='password' size='20'  />"
}
//-->
</SCRIPT>
</HEAD>

<BODY>
<div id=MyInput><input name="dummy" type="text" size="20" value="enter text" onclick=changes(this) /></div>
</BODY>
</HTML>
 
Upvote 0 Downvote
Thanks, half way there!

When you click in the box, it doesn't retain focus. I've tried adding X.focus(); to the function, to noo avail.

Also, I want the same functionality to occur if I tab into the box from another form element. I this possible?

 
Upvote 0 Downvote
Ok I've sorted the tab problem by using onfocus instead of onclick.

But I still can't get the box to retain focus without having to click in it again...
 
Upvote 0 Downvote
X.focus() won't work. Try formName.content.focus() as 'content' is the new name of the text field (in the above example).

'hope that helps.

--Dave
 
Upvote 0 Downvote
how about this (works for me in IE6 and Moz on windows.):
Code: 
<html>
  <head>
    <title>test</title>
    <script type="text/javascript">
      function changeToPwd(el) {
        var ie = document.all;
        
        if (!ie) {
          el.type = "password";
          el.value = "";
        }
        else {
          var f = el.form;
          var newEl = document.createElement("input");
          
          newEl.type = "password";
          newEl.name = el.name || "";
          newEl.id = el.id || "";
          newEl.className = el.className || "";
          
          f.replaceChild(newEl, el);
          newEl.select();
        }
      }
    </script>
  </head>

  <body>
    <form>
      <input
        type="text"
        value="enter password"
        onfocus="changeToPwd(this);" />
    </form>
  </body>
</html>

=========================================================
-jeff
try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
 
Upvote 0 Downvote
I tried that first, of course, but I get an error when changing the type of an input element to password,
that's why i devised the less elegant option.
 
Upvote 0 Downvote
No this doesn't work. Here's an (incomplete) example of my code:

<form action="myPage.jsp" method="post" name="login_form">
<div id=MyInput>
<input name="password" type="text" value="password" size="15" maxlength="20" onfocus="changes(this);" />
</div>
</form>

function changes(a) {
X=document.getElementById("MyInput")
X.innerHTML="<input name='password' class='login_input_box' type='password' size='15' maxlength='20' />"
document.login_form.password.focus();
}
 
Upvote 0 Downvote
>> "but I get an error when changing the type of an input element to password"

in what browser? did you try the code above? notice the branch for ie vs. non-ie...



=========================================================
-jeff
try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
 
Upvote 0 Downvote
Well, your sample code works for me in IE6, except that focus does not go to the password field when the function executes.

However, I have fixed that by inserting a tiny delay in the call to the focus() method.

Try this:

Code: 
function changes(a) {
    X=document.getElementById("MyInput")
    X.innerHTML="<input name='password' class='login_input_box' type='password' size='15' maxlength='20' />"
    [b]setTimeout("document.login_form.password.focus();",0);[/b]
}

Notice, the timeout time I put in is 0! I don't know why this is any different than not using the timeout at all, but... who am I to question why?

'hope this helps.

--Dave
 
Upvote 0 Downvote
...or: wanna have some fun with CSS? Put a DIV over top of the text field (which will be a password field from the get-go).

Example:

Code: 
<html>
<head>
<script>
function showFakePassword(show)
{
 if(show)
 {
  fakePassword.style.left = document.login_form.password.offsetLeft;
  fakePassword.style.top = document.login_form.password.offsetTop;
  fakePassword.style.width = document.login_form.password.offsetWidth;
  fakePassword.style.visibility = 'visible';
  fakePassword.style.display = 'inline';
 }//end if
 else
 {
  fakePassword.style.visibility = 'hidden';
  fakePassword.style.display = 'none';
  document.login_form.password.focus();
 }//end else 
}//end showFakePassword(var)
</script>
</head>
<body onload='showFakePassword(true)'>
<form action="myPage.jsp" method="post" name="login_form">
<div id=MyInput>
<input name="password" type="password" size="15" maxlength="20" />
</div>
<div onclick='showFakePassword(false);' id='fakePassword' style='position:absolute;visibility:hidden;display:none'>&nbsp;password</div>
</form>
</body>
</html>

Works in IE6.

Have fun!

--Dave
 
Upvote 0 Downvote
Damn. None of these work in multiple browsers. We particularly need them to work in a Mac.

I think we are beaten on this one...
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

chikwendu
  • Locked
  • Question
How do I display an extra input box for editing an existing data?
Replies
1
Views
298
chikwendu
chikwendu
keisha1
  • Locked
  • Question
How can I append/insert multiple text files into one .dbf file using java script /html command
Replies
1
Views
330
Samthyr
Samthyr
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
2K
ggriffit
ggriffit
Pudsters
  • Locked
  • Question
Populate text box based on other textbox 1
Replies
2
Views
372
Pudsters
Pudsters
waubain
  • Locked
  • Question
Syntax help to create values list for table column
Replies
1
Views
255
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top