	AllExperts > DHTML
	Search

About Andrew Hoffman
Expertise
I can field just about any question within this topic ranging from JavaScript to CSS, the two ingredients of DHTML. I`m very interested in the W3C and its validation rules for HTML, XHTML, and CSS, and enjoy answering questions of this type as well. I detest sleep and respond at all hours of the day or night.

Experience
Experience in the area
I've been working with DHTML and CSS for 7 years now and build/maintain websites of my own that implement DHTML navigation.

What I'm doing now
My contract with Microsoft has ended and I am working for myself once again. Please contact me for any front-end work at antibland@gmail.com

You are here: Experts > Computing/Technology > HTML/XML > DHTML > .a solution!

DHTML - .a solution!

Expert: Andrew Hoffman - 11/18/2008

Question
I have made a fake google,Just for fun.- http://gaurav09.tk/

In the search bar,the default value is "Gaurav Srivastav".
I want that the text "Gaurav Srivastav" should be written in color rgb(137,137,137)and when somebody click in the search box the text must disappear,and the person using the website can enter the search string in the search box in black colour.
Is it possible

Answer
Gaurav, run this code in any browser to test this solution. Basically, you want to add this to your loading code, if any exists already. The code first looks through all <input> fields and finds the one named "q". Next it sets the starting string color of "q" to rgb(137, 137, 137). If the user enters the field "q" then the text will disappear ONLY IF the string value is "Gaurav Srivastav". If not, this means the user has already entered some text in the field, left, and come back to the field again. In this case, we don't want that text to disappear. Finally, I assign event listeners to the input field so that it toggles correctly and alternates text colors as you requested.

Best of luck,

Andrew

-------------------------

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Gaurav test</title>
<script type="text/javascript">
window.onload = function() {
  var inputs = document.getElementsByTagName("input");
  for (var i = 0; i < inputs.length; i++) {
     if (inputs[i].name == "q") {
        inputs[i].style.color = "rgb(137, 137, 137)";
        inputs[i].onfocus = function() {
           if (this.value == "Gaurav Srivastav") {
              this.value = "";
           }
           this.style.color = "rgb(0, 0, 0)";
        }
        inputs[i].onblur = function() {
           this.style.color = "rgb(137, 137, 137)";
        }
     }
  }
}
</script>
</head>

<body>

<form>
  <input name="q" type="text" value="Gaurav Srivastav" />
</form>
</body>
</html>

Add to this Answer Ask a Question