Problem with Chinese characters displayed inside the password input box_html/css

Problem with Chinese characters displayed inside the password input box_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:24:33

Original

2413 people have browsed it

input login password input box

1. Requirements Description
The login interface must look like the picture below, if is used. When the password entered by the user becomes clear text, this does not meet the requirements. When changing the type attribute of to passowrd. The default "password" becomes "??". Some people may think of using js to dynamically change the type attribute of input. This method is feasible in some browsers such as Firefox. But there is nothing you can do to get it when you encounter the evil IE. In IE, the type attribute of input is read-only. In order to solve the compatibility issues of various browsers, the following methods are used.

2. Solution
We use HTML tag to complete. For details, please view http://www.w3school.com.cn/tags/tag_label.asp w3c standard.
The following is the solution code:

> >
                                                                                                          < li id="pass_li" class="li_bg"> & gt; secret & nbsp; & nbsp; & nbsp; code & lt;/label & gt;
& lt; input type = "password" name = "password" C Lass = "Input" ID = "PASS_INPUT" Onfocus = "Login_input_click ('PASS') " />
                                                      Verification code
code_input" onfocus="login_input_click('code')" maxlength="4" size="4"/>
                                              /commons/image.jsp" title="Click on the image to refresh" onclick="change(this)"/>
& Lt;/div & gt;
& lt; label & gt; label as a layer. Put it where we want it to appear. Set the style of the label
style="position: absolute; top:12px; left:5px;" and put it in the input box. The for attribute of the label is associated with the ID of the input box. When the user clicks on the text of the label, the corresponding label will receive focus. There is no need to modify the type attribute of the tag to achieve the effect.

Reply to discussion (solution)

label This label can only be used in forms.

The poster is sharing his experience, I strongly support it!

Untitled Document

Haha I thought of a very dirty method

The poster, you In this way, when the label is clicked, the input box will get focus no problem, but which input position will be after the sticky note?

If you just want to get the interface effect (the prompt text is in the input box), you can remove the table frame of the input box and directly display the table frame of li (creating the input box effect).

The "table frame" above is typed incorrectly. It should be "border". I wonder if I have a misunderstanding of the requirements. I hope the master will reply

Friends upstairs: The label label layer I am talking about is above the input label layer. When the user enters the input state, the value in the label label is empty and the displayed Chinese characters are gone. So the effect you said will not appear, but there is something wrong with the picture I drew.

Good support