Javascript + css-Tips for adding form availability-javascript-js tutorial

When designing a form, we will add some text prompts. The most common practice is to use value for setting. We will share with you an example below, if you are interested, you can refer to the normal design form below, we will add some prompt text, for example, in the search box, we will prompt "Please enter keywords ", you can hide and display the focus in a timely manner when you get the focus and lose the focus in the search box. The most common method is to set the focus using the value:

The Code is as follows:

Script
Document. getElementById ("keyword"). onfocus = function (){
If (document. getElementById ("keyword"). value = "enter a keyword "){
Document. getElementById ("keyword"). value = "";
}
}
Document. getElementById ("keyword"). onblur = function (){
If (document. getElementById ("keyword"). value = ""){
Document. getElementById ("keyword"). value = "enter a keyword ";
}
}
Document. getElementById ("search"). onsubmit = function (){
Var keyword = document. getElementById ("keyword"). value;
If (keyword = "" | keyword = "enter a keyword "){
Alert ("Enter keywords ");
Return false;
}
Return true;
}
Script

Although such code implements the functions we need, it is not clean, because the text such as "Enter keywords" is only a prompt text, not a value, although there are no major technical problems, it is still troublesome in many cases. For example, we may make the prompt text gray and the text typed by the user black.
The following describes how to use css to achieve better results:

The Code is as follows:

Script
Window. onload = function (){
If (! Document. getElementById ("keyword"). value ){
Document. getElementById ("description"). style. display = "inline ";
}
};
Document. getElementById ("keyword"). onfocus = function (){
If (! Document. getElementById ("keyword"). value ){
Document. getElementById ("description"). style. display = "none ";
}
}
Document. getElementById ("keyword"). onblur = function (){
If (! Document. getElementById ("keyword"). value ){
Document. getElementById ("description"). style. display = "inline ";
}
}
Document. getElementById ("search"). onsubmit = function (){
If (! Document. getElementById ("keyword"). value ){
Alert ("Enter keywords ");
Return false;
}
Return true;
}
Script

Although CSS and JS Code have more implementation methods, but the structure is more reasonable, the prompt text is displayed by introducing the label (by positioning the position attribute of CSS ), make the value itself simpler, and the prompt text and text entered by the user are easier to control in the style, such as the color depth, thus improving the form availability.