Search cursor when clicked

Question

Hello all. I have a search box with the value "Search...". At the moment the user has to delete this before they can type anything. How can the search text disappear when the box is clicked into? Thanks

Answer 1

You need to attach focus and blur event handlers to the search box for this to happen. This is how you can do it in jQuery:

var defaultText = "Enter your search term";
$('#searchBoxId').focus(function(){
    if(this.value == defaultText)
        this.value = '';
});
$('#searchBoxId').blur(function(){
    if(this.value == '')
        this.value = defaultText;
});

When the page loads, just make the search box has "Enter your search term" as its value.

Answer 2

That's a default value, if you can use Javascript (Jquery), here's a function:

JQUERY

<script type="text/javascript">
    (function($){
        $.fn.clearDefault = function(){
            return this.each(function(){
                var default_value = $(this).val();
                $(this).focus(function(){
                    if ($(this).val() == default_value) $(this).val("");
                });
                $(this).blur(function(){
                    if ($(this).val() == "") $(this).val(default_value);
                });
            });
        };
    })(jQuery);
    $('input.clear-default').clearDefault();
</script>

HTML

<input class="clear-default" type="text" value="search..." name="search_box">

Answer 3

If you search Google for "Unobtrusive JQuery Search Box", there are many articles on this. Basically you start with Search: [TextBox]. That works for people that have Javascript disabled. Then using JQuery (or the like), you hide the "Search" DOM element and place that text inside the "text box", then attach jquery methods to the onfocus and blur events to handle the removal / addition of the default text as required.