Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 8194

Dec 1st, 2008

onclick text box?

Expand Post »

Hopefully this is the correct place to post this, so here ya go. I'm learning HTML and just had a few questions. I was using some tutorials from w3schools.com, and I came across Event Attributes. So I have this textbox, and I want it, when clicked, to clear the the text box of it's value, and change the text color to black (as in the actual text box, not the whole screen). Then when you click out of the text box, I want it to change the text color back to grey and have the value of the text box be 'Email' again. Here's the code:

html Syntax (Toggle Plain Text)
<form>
<input type="text" value="Email" name="Email"
style="color:grey;text-align:left;background:white">
</form>
<form>
<input type="text" value="Email" name="Email"
style="color:grey;text-align:left;background:white">
</form>

I realize this must use DHTML, but I am unable to find a good source to help me with this problem. Thanks!

Last edited by peter_budo; Dec 6th, 2008 at 5:27 am. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks) and [icode] (inline code) tags.

Similar Threads

Help on clear text in <input> !! in HTML and CSS
Date function in Drop-Down Box in JavaScript / DHTML / AJAX
pass the value to the text box in JavaScript / DHTML / AJAX
for validation - text box and drop down menu in JavaScript / DHTML / AJAX
text box value in asp in ASP

besktrap

Reputation Points: 10

Solved Threads: 1

Junior Poster in Training

Offline

58 posts
since Jul 2008

Permalink

Dec 2nd, 2008

Re: onclick text box?

You have to write a handlers for onfocus and onblur events for this textbox like this:

html Syntax (Toggle Plain Text)
 
<form>
<input type="text" value="Email" name="Email" style="color:grey;text-align:left;background:white" onfocus='changeTextColor(this, 1)' onblur='changeTextColor(this, 0)'>
</form>
<form>
<input type="text" value="Email" name="Email" style="color:grey;text-align:left;background:white" onfocus='changeTextColor(this, 1)' onblur='changeTextColor(this, 0)'>
</form>

And your handlers will look like this:

javascript Syntax (Toggle Plain Text)
function changeTextColor(tBox, c) {
      if(c==1) { //textbox on focus
               tBox.style.color = "black";
      } else { //textbox out of focus
               tBox.style.color = "grey";
      }
}
function changeTextColor(tBox, c) {
      if(c==1) { //textbox on focus
               tBox.style.color = "black";
      } else { //textbox out of focus
               tBox.style.color = "grey";
      }
}

Last edited by Luckychap; Dec 2nd, 2008 at 12:28 am.

Luckychap

Reputation Points: 83

Solved Threads: 61

Posting Pro in Training

Offline

442 posts
since Aug 2006

Permalink

Dec 2nd, 2008

Re: onclick text box?

You may also try this to skip the coding...

(Toggle Plain Text)

<form action="#" onsubmit="return false;">
<input type="text" value="Email" name="Email"
style="color:grey;text-align:left;background:white"
onfocus="this.style.color = '#000';"
onblur="this.style.color = '#aaa';" />
</form>

essential

Featured Poster

Reputation Points: 114

Solved Threads: 138

Posting Shark

Offline

973 posts
since Aug 2008

Permalink

Dec 3rd, 2008

Re: onclick text box?

thanks! it worked fine, but how would I have it clear the value of the textbox when clicked?

besktrap

Reputation Points: 10

Solved Threads: 1

Junior Poster in Training

Offline

58 posts
since Jul 2008

Permalink

Dec 3rd, 2008

Re: onclick text box?

You may also apply this with onfocus event...

html Syntax (Toggle Plain Text)
<input type="text" value="Enter Some Text!" size="30" onclick="this.value='';" />
<input type="text" value="Enter Some Text!" size="30" onclick="this.value='';" />

essential

Featured Poster

Reputation Points: 114

Solved Threads: 138

Posting Shark

Offline

973 posts
since Aug 2008

Permalink

Dec 4th, 2008

Re: onclick text box?

Click to Expand / Collapse Quote originally posted by besktrap ...

thanks! it worked fine, but how would I have it clear the value of the textbox when clicked?

Now ask us how to hide the text box when clicked.

Luckychap

Reputation Points: 83

Solved Threads: 61

Posting Pro in Training

Offline

442 posts
since Aug 2006

Permalink

Dec 4th, 2008

Re: onclick text box?

um...ok.
how do you hide the textbox when clicked?

besktrap

Reputation Points: 10

Solved Threads: 1

Junior Poster in Training

Offline

58 posts
since Jul 2008

Permalink

Dec 4th, 2008

Re: onclick text box?

so I have these two chunks of code:

html Syntax (Toggle Plain Text)
<form action="#" onsubmit="return false;">
<input type="text" value="Email" name="Email"
style="color:grey;text-align:left;background:white"
onfocus="this.style.color = '#000';"
onblur="this.style.color = '#aaa';" />
</form>
<form action="#" onsubmit="return false;">
<input type="text" value="Email" name="Email"
style="color:grey;text-align:left;background:white"
onfocus="this.style.color = '#000';"
onblur="this.style.color = '#aaa';" />
</form>

&

<input type="text" value="Enter Some Text!" size="30" onclick="this.value='';" />

How would I combine the two?

Last edited by peter_budo; Dec 6th, 2008 at 5:28 am. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks) and [icode] (inline code) tags.

besktrap

Reputation Points: 10

Solved Threads: 1

Junior Poster in Training

Offline

58 posts
since Jul 2008

Permalink

Dec 4th, 2008

Re: onclick text box?

Break the code by using (;), and your code should be like this -->

html Syntax (Toggle Plain Text)
<form action="*" onsubmit="return false;" name="myForm">
<input type="text" name="myText" value="Enter some text!" onclick="this.value='';this.style.visibility='hidden';" size="30" />&nbsp;
<input type="button" name="myButton" value="Show Me!" onclick="document.myForm.myText.style.visibility='visible';" />
</form>
<form action="*" onsubmit="return false;" name="myForm">
<input type="text" name="myText" value="Enter some text!" onclick="this.value='';this.style.visibility='hidden';" size="30" />&nbsp;
<input type="button" name="myButton" value="Show Me!" onclick="document.myForm.myText.style.visibility='visible';" />
</form>

Hope it clear's you up! Enjoy...

essential

Featured Poster

Reputation Points: 114

Solved Threads: 138

Posting Shark

Offline

973 posts
since Aug 2008

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: prob with javascript

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Downsizing image load time

DaniWeb Message

Cancel Changes

User Name
Password