Designers optimize things frequently used by users on webpages, such as input boxes. How is the general input box optimized? For example, when the mouse is suspended in the input box, the color of the input box is changed, and the default text in the input box is automatically selected. To improve user experience and ease of use, some designers will optimize what users often use on the webpage, for example, input box. 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. The following code describes several effects.
1. Click the Html code of the selected content in the input box:
The Code is as follows:
The most important part of this Code is onfocus. If onfocus is not used, onclick can achieve the same effect, for example, onfocus = "this. select ()".
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:
The Code is as follows:
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:
The Code is as follows:
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:
The Code is as follows:
The placeholder attribute of input can be directly used in HTML5:
The Code is as follows:
The above three effects are relatively simple javascript applications. Although they have gone beyond the scope of Html code, they bring great convenience to Html applications and web page creation. Therefore, when necessary, it is also necessary to master some simple javascript.
