You are here:

DHTML/.a solution!

Advertisement

Expert: Andrew Hoffman - 11/20/2008


Question
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>


---------- FOLLOW-UP ----------

QUESTION: everything fine
simply awesome and perfect
one think that i wanna ask is the meta charset was UTF-8 but the code u gave has iso-8859-1
why??
and internet explorer gives the prompt to run activex :(
though working fine with firefox
thank you very much
u r really an expert


Answer
--

one think that i wanna ask is the meta charset was UTF-8 but the code u gave has iso-8859-1
why??

--

I simply created a new page in DreamWeaver and that was the default code that was included.  I'm not sure why that is.

--

and internet explorer gives the prompt to run activex :(

--

This might be a security setting within the browser that prompts for that to happen.  My versions of Internet Explorer 6 & 7 do not prompt me to run active x.


Andrew

DHTML

All Answers

Answers by Expert:

Ask Experts

Volunteer

Andrew Hoffman

Expertise

Ask me about JavaScript, CSS, HTML5/XHTML, or PHP. Chances are I'll be able to help you. I know the economy is in the tank, but if you like my answer, please consider donating a few bucks. It's like tipping your barista, if your barista served fresh code instead of coffee.

Experience

I started doing this when boy bands were still cool.

Education/Credentials
I read a lot of nerdy books to get here.

©2012 About.com, a part of The New York Times Company. All rights reserved.