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

Source: Internet
Author: User
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");

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.