AJAX

RSS

onclick text box?

Please support our JavaScript / DHTML / AJAX advertiser: Programming Forums

•

Posts: 58

Reputation: besktrap is an unknown quantity at this point

Solved Threads: 0

besktrap

Offline

Junior Poster in Training

onclick text box?

Dec 1st, 2008

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:

 Help with Code Tags 
 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 4:27 am. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks) and [icode] (inline code) tags.

•

Posts: 271

Reputation: Luckychap is an unknown quantity at this point

Solved Threads: 35

Luckychap

Offline

Posting Whiz in Training

Re: onclick text box?

Dec 1st, 2008

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

 Help with Code Tags 
 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:

 Help with Code Tags 
 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 1st, 2008 at 11:28 pm.

When you think you have done a lot, then be ready for YOUR downfall.

•

Posts: 730

Reputation: essential is on a distinguished road

Solved Threads: 104

essential

Online

Master Poster

Re: onclick text box?

Dec 2nd, 2008

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

Help with Code Tags

(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>

The test of a first-rate intelligence is the ability to hold two opposed ideas in the mind at the same time, and still retain the ability to function. One should, for example, be able to see that things are hopeless and yet be determined to make them otherwise.

•

Posts: 58

Reputation: besktrap is an unknown quantity at this point

Solved Threads: 0

besktrap

Offline

Junior Poster in Training

Re: onclick text box?

Dec 3rd, 2008

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

•

Posts: 730

Reputation: essential is on a distinguished road

Solved Threads: 104

essential

Online

Master Poster

Re: onclick text box?

Dec 3rd, 2008

You may also apply this with onfocus event...

 Help with Code Tags 
 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='';" />

•

Posts: 271

Reputation: Luckychap is an unknown quantity at this point

Solved Threads: 35

Luckychap

Offline

Posting Whiz in Training

Re: onclick text box?

Dec 3rd, 2008

•

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.

When you think you have done a lot, then be ready for YOUR downfall.

•

Posts: 58

Reputation: besktrap is an unknown quantity at this point

Solved Threads: 0

besktrap

Offline

Junior Poster in Training

Re: onclick text box?

Dec 4th, 2008

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

•

Posts: 58

Reputation: besktrap is an unknown quantity at this point

Solved Threads: 0

besktrap

Offline

Junior Poster in Training

Re: onclick text box?

Dec 4th, 2008

so I have these two chunks of code:

 Help with Code Tags 
 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 4:28 am. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks) and [icode] (inline code) tags.

•

Posts: 730

Reputation: essential is on a distinguished road

Solved Threads: 104

essential

Online

Master Poster

Re: onclick text box?

Dec 4th, 2008

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

 Help with Code Tags 
 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...

Thread Tools Display Modes

Quick Reply to Thread

•

Only community members can participate in forum threads. You must register or log in to contribute.

Similar Threads

Date function in Drop-Down Box (JavaScript / DHTML / AJAX)
pass the value to the text box (JavaScript / DHTML / AJAX)
for validation - text box and drop down menu (JavaScript / DHTML / AJAX)
Help on clear text in <input> !! (HTML and CSS)
text box value in asp (ASP)
how to flag a value other than accepted one (ASP)
hover over text tips (JavaScript / DHTML / AJAX)
Add textbox to editable div problem (JavaScript / DHTML / AJAX)

Other Threads in the JavaScript / DHTML / AJAX Forum

Previous Thread: prob with javascript
Next Thread: Downsizing image load time

•

Views: 3207 | Replies: 8 | Currently Viewing: 1 (0 members and 1 guests)

•

Thread Tools	Display Modes
Show Printable Version Email this Page	Linear Mode Switch to Hybrid Mode Switch to Threaded Mode