| | |
onclick text box?
Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
![]() |
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:
I realize this must use DHTML, but I am unable to find a good source to help me with this problem. Thanks!
html Syntax (Toggle Plain Text)
<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.
You have to write a handlers for onfocus and onblur events for this textbox like this:
And your handlers will look 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>
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"; } }
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.
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...
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='';" />
so I have these two chunks of code:
&
How would I combine the two?
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>
&
<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.
Break the code by using (;), and your code should be like this -->
Hope it clear's you up! Enjoy...
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" /> <input type="button" name="myButton" value="Show Me!" onclick="document.myForm.myText.style.visibility='visible';" /> </form>
![]() |
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
| 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





