Question

I have a input box which looks like below,

<input id="basic-search" type="text" value="Enter keyword or phrase" title="basic-search" class="form-text" size="38" onclick = "this.className = 'focused'; javascript:Reset();" onblur = "javascript:Reset();" />

and css for .focused and form-text is,

.focused {
color:black;
}

.form-text
{
    background-color: #FFF;
    color: #CCC;
}

The input box on load has the content ‘Enter keyword or phrase’ which is grey initially. Onclick on this box and on typo the font color changes to black(works good). When the delete the contents, tab to next field or on mouse press the content ‘Enter keyword or phrase’ changes to black. It should still be grey. What change should i make in the css? any inputs would help. Thanks.

Note: I noticed the ‘title’ field in stackoverflow works as I would want. I want my boc to work the same way.

Answer 1

Use onfocus instead of onclick. Also, for your onblur, append the css class:

jsFiddle: http://jsfiddle.net/QybRX/14/

<input id="basic-search" type="text" value="Enter keyword or phrase" title="basic-search" class="form-text" size="38" onfocus="this.value=''; this.className = 'focused'; javascript:Reset();" onblur = "basicSearch()" />
<input type="text"/>

<script>    
    function basicSearch()
    {
        var element = document.getElementById("basic-search");

        if ( element.value.length == 0 )
        {
            element.value = 'Enter keyword or phrase';
            element.className = 'form-text';
        }
        else
        {
            element.className = 'focused';
        }

        javascript:Reset();
    }
</script>