www.webdeveloper.com
Results 1 to 4 of 4

Thread: change color onclick for default textbox value

  1. #1
    Join Date
    Nov 2010
    Posts
    19

    change color onclick for default textbox value

    Hello,

    I've been trying to make a default value in a text box go away when clicked.

    The general consensus on this forum and on the rest of the internet seems to be that this code:
    <script>
    function clearText(field){
    if (field.defaultValue == field.value) field.value = ''
    else if (field.value == '') field.value = field.defaultValue;
    }
    </script>

    <body>
    <input name="emailaddress" type="text" id="email_box" value="Enter Your Email Address" onFocus="clearText(this)" onBlur="clearText(this)">
    </body>



    works pretty well. But I wonder how I can add a color change to this function. They default value "enter email address here" would be in grey, but when the user begins to type, it would be black. then deleted what'd been typed, back to grey.

    document.getElementById(email_box).style.color='#000000'; .....is that too naïve..? It didn't work no matter where I put it. And dreamweaver didn't like it when I tried to copy the syntax of the first function, but make it change colors instead. It furthermore hated me trying to assign two different functions to the onClick event.

    It also didn't like at all when I tried to apply two classes to the same object...

    All in all, it's been pretty disagreeable today.

    Thank you in advance to anyone who can help me out!

    Thomas

  2. #2
    Join Date
    Jun 2007
    Location
    Washington D.C. Metro
    Posts
    76
    this should work:

    css:
    Code:
    #email_box {
    	color:#999;
    }
    js:
    Code:
    function clearText(field)
    {
    	if (field.defaultValue == field.value) {
    	
    		field.value = '';
    		field.style.color = '#000000';
    		
    	} else if (field.value == '') {
    	
    		field.value = field.defaultValue;
    		field.style.color = '#999999';
    	}
    }

  3. #3
    Join Date
    Nov 2010
    Posts
    19
    Hi trandrus,

    That is massively helpful: Thank you!

    Is «defaultValue» a built-in javascript function? Ditto «field»? Because then if «onFocus="clearText(this)"» passes «this» to your function in a way in which javascript recognizes «this» as a (text)field, your code actually sort of makes sense to me...if «this» is the sort of thing that can be put into a line of html (which I wasn't previously aware of)....

    If this is all garbage, I have to apologize: your code is too concise for me Would it be too much an imposition to ask you to explain a bit how it works?

    Many thanks!
    Thomas

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by loren.hibbard.i View Post
    Hi trandrus,

    That is massively helpful: Thank you!

    Is &#171;defaultValue&#187; a built-in javascript function? Ditto &#171;field&#187;? Because then if &#171;onFocus="clearText(this)"&#187; passes &#171;this&#187; to your function in a way in which javascript recognizes &#171;this&#187; as a (text)field, your code actually sort of makes sense to me...if &#171;this&#187; is the sort of thing that can be put into a line of html (which I wasn't previously aware of)....

    If this is all garbage, I have to apologize: your code is too concise for me Would it be too much an imposition to ask you to explain a bit how it works?

    Many thanks!
    Thomas
    - the defaultValue is a native JavaScript property of the form's elements. It will return always the value (if set by default - i.e. physically written) of the HTML native attribute value.

    - this is a sort of self-reference of an element. In your case, it is the reference of the text field.

    But it depends on the syntax. this might refer a new created object within a constructor. Or simply the Window Global Object, if it is written within a function which is not a constructor.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles