Question

I have been trying to get this to work. Basically I have a search box that has a default string in it (i.e. Search) and it should go away when the user clicks on the input field.

Here is the code:

HTML:

<form method="get" action="index.php" id="search">
<span id="searchLogo"></span>
<input type='text' name='q' id='searchBox' value="Search <?php print $row[0]?> tweets!" autocomplete="off" />
</form>

Javascript/jQuery: (defaultString is a global variable that has the value of the textbox)

function clearDefault() {
var element = $('#searchBox');

if(element.attr('value') == defaultString) {
    element.attr('value',"");
}
element.css('color','black');
}

$('#searchBox').focus(function() {
clearDefault();
});

Answer 1

The problem was that the event binding was not inside the $(document).ready() handler.

Fixed:

function clearDefault() {
var element = $('#searchBox');

if(element.val() == defaultString) {
element.val("");
}
element.css('color','black');
}

$(document).ready(function() {
    $('#searchBox').focus(function() {
    clearDefault();
    });
});