jquery Implementation text text box input prompt information (Google Baidu Taobao search box prompt Implementation)

In the search box, enter a hint that has been entered in the previous box, and the text box will automatically disappear after the focus, as follows:

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M00/38/13/wKiom1OyWLjhPufaAABLiCC82Xw021.jpg "style=" float: none; "title=" Qq20140701143402.png "alt=" Wkiom1oywljhpufaaablicc82xw021.jpg "/>

The effect of placing the mouse over a text box:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/38/12/wKioL1OyWInB_NrXAABBX2_Ht4U057.jpg "title=" Qq20140701143619.png "style=" Float:none; "alt=" wkiol1oywinb_nrxaabbx2_ht4u057.jpg "/>

Create a tool class (already exists without having to create) Util.js (Dwr js)

Add the following method to the inside:

JS Code

/**

* The gray hint in the input box, the introduction of jquery before use

* <br> How to use: &lt;input type=&quot;text&quot; tipmsg=&quot; your username &quot;&nbsp;&nbsp; /&gt;

*

* @return

*/

function Inputtiptext () {

$ ("input[tipmsg]"). each (function () {

if ($ (this). val () = = "") {

var oldval=$ (this). attr ("tipmsg");

if ($ (this). val () = = "") {$ (this). attr ("value", Oldval). css ({"Color": "#888"});

$ (This)

. css ({"Color": "#888"})//Gray

. focus (function () {

if ($ (this). Val ()!=oldval) {$ (this). css ({"Color": "#000"})}else{$ ("). Val (" "). css ({" Color ":" #888 "})}

})

. blur (function () {

if ($ (this). val () = = "") {$ (this). Val (oldval). css ({"Color": "#888"})}

})

. KeyDown (function () {$ (this). css ({"Color": "#000"})});

}

});

}

2. How to use

For use on a page (JSP), first load the jquery and Util tool classes

The code is as follows:

JSP code

<%@ include file= "/common/taglibs.jsp"%>

<%@ page pageencoding= "UTF-8"%>

<title> Testing </title>

<script type= "Text/javascript" src= "${pagecontext.request.contextpath}/scripts/jquery-1.3.2.min.js" ></ Script>

<script type= "Text/javascript" src= "${pagecontext.request.contextpath}/scripts/util.js" ></script>

<script type= "Text/javascript" >

$ (function () {

Inputtiptext (); Initializes the gray hint information for input

});

</script>

<input type= "text" tipmsg= "Your user name"/>

This can be achieved, very good effect, if the current page dynamically add text, just call the JS method can be.