[Solved] Remove text from search box on click

[Jay Mehta]

Hi,

I have dragged a search control on my web pages. I have a label inside the search text box, same as on this website (Search Site). I want to know, how I can get the text/label disappear, when someone clicks on the text box to enter value, and get it back when clicked outside the search box?
Can you please explain me in detail?

Thank you very much,
Jay Mehta.

[Veselin Vasilev]

Hi Jay Mehta,

I suppose you mean RadTextBox and its EmptyMessage property as shown in this online demo.

Sincerely yours,
Veselin Vasilev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Jay Mehta]

Hi Veselin,

I am using the search control, which is provided on the controls list, if this is something different then RadTextBox.

Thank you,
Jay Mehta.

[Ivan Dimitrov]

Hello Jay Mehta,

The text in the control is called "watermark". The desired behavior can be achieved by using js functions. We use ASP.NET TextBox server control.

Below is a sample code that shows how the watermark works. You can extend the code if necessary.

<style type="text/css">
/* Search Box */
.sf_searchBox label
{
 display: block;
}
/* Search Box */
.sf_searchBox
{
 position: relative;
}
.sf_searchBox label
{
 display: block;
 position: absolute;
 top: 3px;
 left: 4px;
 color: #000;
 font-style: italic;
 color: #666;
 font-size: .95em;
}
.sf_searchBox .sf_searchText
{
 border: 1px solid #BEBEBE;
 padding: 2px;
 width: 140px;
 height: 17px;
 font-size: 12px;
 vertical-align: middle;
}

.sf_searchBox .sf_searchSubmit
{
 font-weight: bold;
 padding: 0 0 2px;
 font-size: .9em;
 vertical-align: middle;
 width: 60px;
 text-align: center;
}
.sf_s
{
    text-indent: 0px;
}
</style>


<script type="text/javascript">
    function hideLabel(obj, flag) {
        var lbl = obj.parentNode.getElementsByTagName('label')[0];
        if (flag) {
            lbl.style.textIndent = "-99999px";
        } else {
            if (obj.value === '')
                lbl.style.textIndent = "0px";
            else
                lbl.style.textIndent = "-99999px";
        }

    }
    function focusSearchField(obj) {
        var id, field;
        id = obj.getAttribute('for');
        if (id && (field = document.getElementById(id))) {
            field.focus();
        }

    }
</script>

<fieldset class="sf_searchBox">
<asp:Label ID="Label1" runat="server" AssociatedControlID="queryText" onclick="focusSearchField(this);" >Search Blog</asp:Label>
<asp:TextBox ID="queryText" Text="Search Blog" runat="server" CssClass="sf_searchText" onfocus="hideLabel(this,true); " onblur="hideLabel(this,false); " />
<input type ="button" id="searchButton" runat="server" class="sf_searchSubmit" value="Search" alt="Search"/>

</fieldset>
<script type="text/javascript">
    hideLabel(document.getElementById('ctl00_Contentplaceholder1_SearchBox1_ctl00_ctl00_queryText'), false);
</script>

Another option is implementing the example  suggested in the previous reply.

Kind regards,
Ivan Dimitrov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Jay Mehta]

Hi Ivan,

Thank you very much, this was of great help. And thank you for a quick response.

Thank you,
Jay Mehta.