JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

onclick text box?

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: Jul 2008
Posts: 58
Reputation: besktrap is an unknown quantity at this point 
Solved Threads: 1
besktrap's Avatar
besktrap besktrap is offline Offline
Junior Poster in Training

onclick text box?

 
0
  #1
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:

html Syntax (Toggle Plain Text) 
  1. <form>
  2. <input type="text" value="Email" name="Email"
  3. style="color:grey;text-align:left;background:white">
  4. </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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2006
Posts: 314
Reputation: Luckychap is on a distinguished road 
Solved Threads: 42
Luckychap's Avatar
Luckychap Luckychap is offline Offline
Posting Whiz

Re: onclick text box?

 
0
  #2
Dec 2nd, 2008
You have to write a handlers for onfocus and onblur events for this textbox like this:

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

And your handlers will look like this:

javascript Syntax (Toggle Plain Text) 
  1. function changeTextColor(tBox, c) {
  2.       if(c==1) { //textbox on focus
  3.                tBox.style.color = "black";
  4.       } else { //textbox out of focus
  5.                tBox.style.color = "grey";
  6.       }
  7. }
Last edited by Luckychap; Dec 2nd, 2008 at 12:28 am.
When you think you have done a lot, then be ready for YOUR downfall.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: onclick text box?

 
0
  #3
Dec 2nd, 2008
You may also try this to skip the coding...
<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>
Dev.Opera — FOLLOW THE STANDARDS, BREAK THE RULES...
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2008
Posts: 58
Reputation: besktrap is an unknown quantity at this point 
Solved Threads: 1
besktrap's Avatar
besktrap besktrap is offline Offline
Junior Poster in Training

Re: onclick text box?

 
0
  #4
Dec 3rd, 2008
thanks! it worked fine, but how would I have it clear the value of the textbox when clicked?
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: onclick text box?

 
0
  #5
Dec 3rd, 2008
You may also apply this with onfocus event...
html Syntax (Toggle Plain Text) 
  1. <input type="text" value="Enter Some Text!" size="30" onclick="this.value='';" />
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2006
Posts: 314
Reputation: Luckychap is on a distinguished road 
Solved Threads: 42
Luckychap's Avatar
Luckychap Luckychap is offline Offline
Posting Whiz

Re: onclick text box?

 
0
  #6
Dec 4th, 2008
•
•
•
•
Originally Posted by besktrap View Post
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2008
Posts: 58
Reputation: besktrap is an unknown quantity at this point 
Solved Threads: 1
besktrap's Avatar
besktrap besktrap is offline Offline
Junior Poster in Training

Re: onclick text box?

 
0
  #7
Dec 4th, 2008
um...ok.
how do you hide the textbox when clicked?
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2008
Posts: 58
Reputation: besktrap is an unknown quantity at this point 
Solved Threads: 1
besktrap's Avatar
besktrap besktrap is offline Offline
Junior Poster in Training

Re: onclick text box?

 
0
  #8
Dec 4th, 2008
so I have these two chunks of code:

html Syntax (Toggle Plain Text) 
  1. <form action="#" onsubmit="return false;">
  2. <input type="text" value="Email" name="Email"
  3. style="color:grey;text-align:left;background:white"
  4. onfocus="this.style.color = '#000';"
  5. onblur="this.style.color = '#aaa';" />
  6. </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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: onclick text box?

 
0
  #9
Dec 4th, 2008
Break the code by using (;), and your code should be like this -->
html Syntax (Toggle Plain Text) 
  1. <form action="*" onsubmit="return false;" name="myForm">
  2. <input type="text" name="myText" value="Enter some text!" onclick="this.value='';this.style.visibility='hidden';" size="30" />&nbsp;
  3. <input type="button" name="myButton" value="Show Me!" onclick="document.myForm.myText.style.visibility='visible';" />
  4. </form>
Hope it clear's you up! Enjoy...
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



acid2 ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate automatically beta box browser bug captchaformproblem checkbox close codes createrange() css cursor debugger decimal dependent disablefirebug dom download dropdown editor element engine enter error events explorer ext file firefox form forms frameworks getselection google gwt gxt hiddenvalue highlightedword hint html htmlform ie7 ie8 iframe index internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsp jump listbox maps masterpage math media menu microsoft mp4 object onmouseoutdivproblem onreadystatechange paypal pdf php player position programming progressbar prototype redirect regex runtime safari scale scriptlets search security select size software sql text textarea unicode w3c window windowofwords windowsxp \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC