Create a default text hint in a text box
Usually when a user searches for content, the text box gives a default prompt, prompting the user to enter the correct content for the search, before the text box enters the content.
When the text box gets the focus, if the content of the text box is the same as the hint content, the hint disappears naturally.
When the text box has no value and loses focus, the text box content regenerates the default prompt.
To achieve the above requirements, the code is as follows:
Copy Code code as follows:
<%@ Page language= "C #" autoeventwireup= "true" codebehind= "Default.aspx.cs" inherits= "Web.default"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<script src= "Jquery-1.8.2.min.js" type= "Text/javascript" ></script>
<link href= "Base.css" rel= "stylesheet" type= "Text/css"/>
<style type= "Text/css" >
. text
{
border: #0a8fda solid 1px;
Color: #cccccc;
Font-style:italic;
Background: #fff URL (img/input.gif);
padding:5px;
}
. text-focus
{
Border:solid 1px #f50;
Background: #fff URL (img/input.gif);
padding:5px;
}
</style>
<script type= "Text/javascript" >
$ (document). Ready (function () {
var Txtsearch = $ ("#<%=txtsearch.clientid%>");
$ ("#txtSearch"). focus (function () {
if (txtsearch.val () = = This.title) {
Txtsearch.val ("");
This.classname = "Text-focus";
}
});
$ ("#txtSearch"). blur (function () {
if (txtsearch.val () = = "") {
Txtsearch.val (This.title);
This.classname = "text";
}
});
Txtsearch.blur ();
});
</script>
<body>
<form id= "Form1" runat= "Server" >
<div style= "margin:100px auto; width:400px; Height:80px;border:solid 1px #0a8fda; " >
<p style= "Text-align:center;" >
<asp:textbox id= "Txtsearch" runat= "Server" width= "200px" class= "text" tooltip= "Please enter keyword for search" ></asp:textbox >
<asp:button id= "btnsearch" runat= "server" text= "search" class= "button Blue"/>
</p>
</div>
</form>
</body>
