I use VS2010,C# to develop an ASP.NET web app, I'm going to implement a search box like the one used in Stackoverflow (or other sites), initially there is a phrase (for instance "search") in the search text box, when user click in text box, its text is emptied and user can type his phrase, but if he leaves the text box (lost focus) empty, again the phrase "search" is displayed, how can I implement this nice effect?

thanks

I use VS2010,C# to develop an ASP.NET web app, I'm going to implement a search box like the one used in Stackoverflow (or other sites), initially there is a phrase (for instance "search") in the search text box, when user click in text box, its text is emptied and user can type his phrase, but if he leaves the text box (lost focus) empty, again the phrase "search" is displayed, how can I implement this nice effect?

thanks

• javascript
• asp

• just check this one: stackoverflow./questions/4770585/… – Davide Piras Commented Dec 9, 2011 at 10:05
• 2 don't be scared of JQuery, jQuery IS 100% pure cross browser solid JavaScript. Other solutions eventually break on some browsers unless you test in all of them... – Davide Piras Commented Dec 9, 2011 at 10:22

5 Answers 5

I have seen the view source for stack overflow and what i notice is that they have a attribute named placeholder

<div id="hsearch">
                <form id="search" action="/search" method="get" autoplete="off">
                <div>

                    <input autoplete="off" name="q" class="textbox" **placeholder="search"** tabindex="1" type="text" maxlength="140" size="28" value="">
                </div>
                </form>
            </div>

try this it works for mozilla ,, check for others

hope it helps

This is the textbox watermark plugin which I use:

http://code.google./p/jquery-watermark/

I then created the following code which uses the title attribute for the watermark text for all elements with the .textbox_watermark class

var Textbox_Watermark =
{
    init: function () {

        var textboxWatermarks = $(".textbox_watermark");

        for (var i = 0, ii = textboxWatermarks.length; i < ii; i++) {
            $(textboxWatermarks[i]).watermark(textboxWatermarks[i].title);
        }
    }
}

Textbox_Watermark.init();

Then when focus is on the textbox, the watermark is removed.

You will need the jQuery framework for this to work

Here is a little script I use for just this purpose. It does required JQuery though, but if that is an option for you then give it a try. (there is probably a javascript alternative for this too, but I dont know it)

function addInputBlur(selector, text) {
    var element = $(selector);

    element.blur(function () {
        if ($(this).val() == "") {
            $(this).val(text);
            $(this).addClass("InputBlur");
        }
        else {
            $(this).removeClass("InputBlur");
        }
    });
    element.focus(function () {
        if ($(this).val() == text) {
            $(this).removeClass("InputBlur");
            $(this).val("");
        }
    });

    element.blur();
}

Note: the "selector" param should be a JQuery selector value (i.e. "#MyTextbox")

Also, the "InputBlur" CSS class is just the style I use for the grey/italic font

<input type="text" 
    onblur="javascript:if(this.value=='') this.value= this.defaultValue;" 
    onfocus="javascript:if(this.value==this.defaultValue) this.value='';" 
    id="txtSearch" 
    value="search" 
    name="txtSearch" />

You can do this in JavaScript using a function similar to this one:

        /*
         * applyDefaultValue() - Takes a DOM object and it's string value as paramters, when the element
         * is focussed, the 'value' is blanked out, ready for user entry. When the item is blurred, if nothing was typed
         * then the original value is restored.
         */
        function applyDefaultValue(elem, val) {
            elem.value = val;
            elem.onfocus = function() {

                if (this.value === val) {
                    this.value = ''; //On focus, make blank
                }
            }

            elem.onblur = function() {
                if (this.value === '') {
                    this.value = val; //If it's not in focus, use declared value
                }
            }
        }

You can then apply this to items like this:

        /*
         * Onload function to set the default 'email address'/'search' value and blank out the password field
         */
        window.onload = function() {
            applyDefaultValue(document.getElementById('email'), 'Email Address');
        }