This article mainly introduced the ASP.net use jquery to implement the search box default prompt function, everybody reference uses the bar
Create a default text hint in a text box usually when the user searches for content, the text box gives a default prompt, prompting the user to search for the correct content before entering the text box. When the text box gets the focus, if the text box content is the same as the hint content, the hint will disappear naturally. When the text box does not have any values and loses focus, the text box content regenerates the default prompt. to achieve the above requirements, the code is as follows: The code is 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 "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head runat=" Server "> <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 1 px color: #cccccc; FONT-style:italic; background: #fff URL (img/input.gif); padding:5px; } . Text-focus { & nbsp Border:solid 1px #f50; background: #fff URL (img/input.gif); padding:5px; } </style> <script type= "Text/javascript" > &NBS P $ (document). Ready (function () { var txtsearch = $ ("#<%=txtsearc H.clientid%> "); $ ("#txtSearch"). focus (function () { &N Bsp if (txtsearch.val () = this.title) { T Xtsearch.val ("");   This.classname = "Text-focus"; ( }); $ ("#txtSearch"). blur (function () { &NB Sp if (txtsearch.val () = "") { TX Tsearch.val (This.title); This.classname = "text"; ( }); Txtsearch.blur (); }); </script> </head> <body> <form id= "Form1" runat= "Server" > &nbs P <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" to oltip= "Please enter the search keyword" ></asp:TextBox> <asp:button id= "btnsearch" runat = "Server" text= "search" class= "button blue"/> </p> </div> &NB Sp </form> </body> </html>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
