Automatically clear and restore the default value of the form text input box-defaultvalue/setattribute/focus/blur

When there is a default value in the text input box of the form, the default value is automatically cleared when the input box is focused. If no value is entered, the default value is restored when the focus field is left ?), This usually occurs when searching and filling out forms. The following are different ways for me to handle such a problem in different periods.

1) initial:See the most primitive method, just like a pot of porridge. Mixed with HTML tagsIt may also have some advantages.

<Input type = "text" name = "yourname" value = "username"Onclick= "If (this. value = 'username') {This. value ='';} else {This. Select ();}"Onblur= "If (this. value = ''){This. value = 'username ';} "/>

2) later:This effect is used in many places at work, soExit the scriptBut the script and content are stillCannot be completely detachedOpen

<Input type = "text" name = "yourname"Id = "kW"Value = "User Name"/>

Function init_input (ID, Val){
VaR Ob = Document. getelementbyid (ID );
If (OB ){
Ob. onfocus = function (){
If (this. value = Val ){
This. value = "";
} Else {
This. Select ();
}
}
Ob. onblur = function (){
If (this. value = ""){
This. value = val;
}
}
}
}
Init_input ("KW", "User Name");

3) final:Recently, I accidentally went to Jeff Starr's blog and made further improvements based on his code,Scripts and content are completely separated and can be processed in batches

<DivId = "WP">
<Input type = "text" name = "yourname" value = "username"/>
<Input type = "text" name = "email" value = "email"/>
</Div>

Function init_input (ID){
VaR indium = Document. getelementbyid (ID). getelementsbytagname ('input ');
For (VAR I = 0; I <indium. length; I ++ ){
If (indium [I]. type = 'text '){
Indium [I].Setattribute("Rel", indium [I].Defaultvalue)
Indium [I]. onfocus = function (){
If (this. value = This.Getattribute("Rel ")){
This. value = "";
} Else {
This. Select ();
}
}
Indium [I]. onblur = function (){
If (this. value = ""){
This. value = This.Getattribute("Rel ");
}
}
}
}
}
Init_input ("WP");