Making Input Box Text Transparent when Input Box is Inactive

JavaScript
1

Hello everyone,

I have seen many times with input boxes where the text is somewhat transparent when the user is not inputting anything into the box, and the text becomes obscure (not transparent) again as the user activates the box to input information- in this case, it is the e-mail address.

In my HTML markup, my form looks like this:


<input type="text" name="go" id="go" value="your e-mail" onclick="input_focus(this)"  onblur="input_reset(this)"/>
          <input type="submit" value="Join" />

I have a small JS script file attached to this file. It removes the value when active and restores the original value - “your e-mail” into the input box. It is this:


function input_focus(obj){
	if ( obj.value == obj.defaultValue ){
		obj.value = ""
	}
}

function input_reset(obj){
	obj.value = obj.defaultValue;
}

What can I add to this script in order to do what I discussed at the opening of this thread.
I hope my question was made clear and concise. Thank you for your help. :smiley:

2

That sounds like it’s a very bad idea, because we have learned that partly transparent form fields are disabled, and can only be enabled by doing something else. A prime example is option radios to subscribe to a newsletter, and only when subscribe is selected, does the email field stop being partly transparent so that you can then enter your information in there.

So when a field is seen as being partly transparent, or faded, people won’t even try to interact with it.

3

Hi,
may be the placeholedr attribute can help
http://davidwalsh.name/html5-placeholder

4 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
,input {
  color:gray;
}

/*]]>*/
</style>
<script  type="text/javascript">
/*<![CDATA[*/

function input(obj,color){
 obj.style.color=color;
}

/*]]>*/
</script></head>

<body>
<input class="input" type="text" name="go" id="go" value="your e-mail" onfocus="input(this,'black')"  onblur="input(this,'gray')"/>

</body>

</html>
5

What are these two things?


/*<![CDATA[*/
/*]]>*/

I have been trying to find out.

6

Those are to prevent the script from being interpreted as XML content, when an XHTML page is being interpreted as XML.
Due to web browsers such as Internet Explorer having no ability to work with XHTML code, so virtually all of the XHTML code on the web use a mutated version of XHTML which uses HTML compatibility guidelines that are designed to allow the XHTML code to be interpreted as if it were HTML code instead. As a result, we’ve remained with using HTML 4 and HTML 5 for the HTML code instead.

Also, you shouldn’t have scripting within your web page. When you put your scripting in a script file and use that instead, there is no need for that CDATA technique either.

So for me, CDATA is a code smell that indicates that several improvements need to be made.