By default, the text disappears after Js makes a click on the input box _ special text effects

To improve user experience and ease of use, some designers will optimize things that are frequently used by users on webpages, such as input boxes. How is the general input box optimized? From the perspective of user experience, it simplifies the user usage steps and makes it easier for users to use. in order to improve user experience and ease of use, some designers optimize things that are frequently used by users on webpages, such as input boxes. How is the general input box optimized? From the perspective of user experience, it simplifies the user usage steps and makes it easier for users to use, for example, when the mouse is suspended in the input box, the color of the input box is changed, the default text in the input box is automatically selected, or the default content is automatically cleared when the input box is clicked. This effect sounds complicated, but it is actually very easy to do. it can be solved with a small javascript code. Lower? This section describes the code for several effects:

1. click the Html code of the selected content in the input box:

2. change the border color or background color when hovering over the input box.

There are two methods for this effect: Method 1: Use the pseudo element in CSS: focus; Method 2: Use a small javascript; Method 1: The html code is the same as in the above example, add the following section to CSS:
Input: hover {border: 1px solid # F00 ;}
When the mouse is hovering over the input box, the border of the input box turns red, but this method is only valid in Firefox and IE7 or later versions. IE6 does not support this method, so it has some limitations. Most of the code in method 2 is the same as in the above example, but a code with a mouse suspension is added later:

Most browsers support this code.
3. click the default text in the input box to disappear
Another effect is that when you click the input box, the original default text disappears. If you enter other new content and move the mouse away, the new content in the input box remains unchanged. if you do not enter new content, move the mouse away from the input box and restore the default text. This effect can only be determined by adding a small javascript section:

We carefully accept your suggestions. we will listen carefully to your criticism. Please describe your suggestions or problems in detail.

The above three effects are relatively simple javascript applications.