JavaScript and jquery implementations setting and removing text box defaults effect code _javascript tips

The effect you want to implement here is to set and remove the default text box, and the gray word disappears when the mouse is placed in the text box.

1. You can use the simple way to add the onfocus attribute to the input text box, the following code:

Copy Code code as follows:

<input id= "keyword" name= "keyword" size= "class=" Inputstyle keywords "value=" Please enter the keyword to search "
Onfocus= ' if (this.value== "Please enter the keyword for search") {this.value= ""; '
Onblur= ' if (this.value== "") {this.value= "Please enter the keyword to search";}; ' >

In fact, the Onfocus property is very useful, you can also change the CSS style through the Onfocus property, the following code:

Copy Code code as follows:

<input id= "keyword" name= "keyword" size= "class=" Inputstyle keywords "value=" Please enter the keyword to search "
Onfocus= ' if (this.value== "Please enter the keyword for search") {this.value= ""; This.classname= "input01"
Onblur= ' if (this.value== "") {this.value= "Please enter the keyword to search"; This.classname= "input02" ' >

2. It can also be implemented using jquery:

Copy Code code as follows:

$ (document). Ready (function () {
var Vdefault = $ (' #keyword '). Val ();

$ (' #keyword '). focus (function () {
If the value is the default value when the focus is obtained, the setting is null
if ($ (this). val () = = Vdefault) {
$ (this). Val ("");
}
});
$ (' #keyword '). blur (function () {
If the value is blank when the focus is lost, set to the default value
if ($ (this). val () = "") {
$ (this). Val (Vdefault);;
}
});
});

Of course there are many ways to implement it, and here's just what I've used ...