Add default text implementation code to the jquery search box

I will see a prompt before entering text in the search box of many websites. The prompt will be automatically hidden when we click to enter. Below I will introduce two implementation methods.

For example, use js's focus loss and focus Retrieval Method

Js Code

The Code is as follows:	Copy code
<Input type = "text" name = "s" value = "prompt text" onfocus = "if (value = 'prompt text ') {value = ''}" onblur = "if (value ='') {value = 'prompt text'} "/>

Implementation in WordPress

The Code is as follows:	Copy code
<Input type = "text" name = "s" id = "s" size = "15" value = "<? Php echo (get_search_query () ? Get_search_query (): 'Your Default text');?>" Onfocus = "if (this. value = 'your Default Text ') {this. value = ";}" onblur = "if (this. value =") {this. value =' <? Php _ E ('your Default text', 'jessica ')?> ';} "Name =" s "id =" s "/>

Jquery code

 

The Code is as follows:	Copy code
$ (Document). ready (function (){ // Search box $ ('# Keyword'). focus (function (){ If ($ (this). val () = 'enter a keyword! '){ $ (This). val (""); } }); $ ('# Keyword'). blur (function (){ If ($ (this). val () = ""){ $ (This). val ('enter the keyword! '); } }); });

A website instance

The Code is as follows:

Copy code

$ (Function (){ $ ("[Placeholder]"). focus (function (){ Var input = $ (this ); If (input. val () = input. attr ("placeholder ")){ Input. val (""); Input. removeClass ("placeholder "); } }). Blur (function (){ Var input = $ (this ); If (input. val () = "" | input. val () = input. attr ("placeholder ")){ Input. addClass ("placeholder "); Input. val (input. attr ("placeholder ")); } }). Blur (); $ ("[Placeholder]"). parents ("form"). submit (function (){ $ (This). find ("[placeholder]"). each (function (){ Var input = $ (this ); Input. val (input. val () = input. attr ("placeholder ")? "": Goog.string.html Escape (Input. val ())); }) }); });