Question

i have the following problem with that code in my html tag:

<div id="searchbar"><input name="searchbar" type="text" id="searchfield" value="some text" onfocus="
if(this.value==this.defaultValue) 
    this.value=''; 
    this.style.color='#11111'" 
onblur="
if(this.value=='') 
    this.value=this.defaultValue;
    this.style.color='#22222'
if(this.value==this.defaultValue) 
    this.style.color='#111111'" 

okay, the main goal is to approve that in my searchfield where the standard value is given with “some text” should change color for only new entries.

that message “some text” will disappear on click into it. now, the new value should change its color from standard #222222 to #111111. second, when leaving this field there have to be two different ways to look at. the first possibility should be that if the new value is different from the standard one with “some text” the color should stay on #222222. second possibility would be if the new entry is the same like standard value or even no entry was made then the color should change back to the default one to #222222. so the code above works up to the last point.

if there is someone who could give me advice on how to solve that i really would appreciate. thanks a lot.

Answer 1

Instead of your long complicated code just use HTML5 placeholder

Jsfiddle Example

HTML

<div id="searchbar">
<input name="searchbar" type="text" id="searchfield" placeholder="Some Text" />
</div>

CSS

#searchbar input {
    color: green;
}
input::-webkit-input-placeholder {
    color: red;
}
input:-moz-placeholder {
    color: red;
}​

Change the color according to your wish.

Note: Placeholder will not support in IE.

UPDATE

If you wants to use a placeholder to support all browsers use this placeholder–a jQuery plugin and tweek the style.css in it to achieve your result.