Implementing mouse click on text box to display and hide prompt text based on JQuery_jquery

For example, the search box on my website:

When not in use:

After mouse click:

It is very simple to achieve this effect with JQuery. The following is the code:

Copy the code The code is as follows:

$(document).ready(function () {
var searchBox = $("#ctl00_txtSearch");
searchBox.focus(function () {
if (searchBox.val() = = this.title) { // The ToolTip property of the TextBox control is converted into Html as the title property
searchBox.val("");
}
});
searchBox.blur(function () {
if (searchBox.val() == "") {
searchBox.val(this.title);
}
});
searchBox.blur();
});

where #ctl00_txtSearch is the ID of the search box (ASP.NET can obtain this ID through ClientID)