Hide and display form passwords based on JavaScript_javascript skills

For the security of the website, many friends set the password to be more complex, but the password cannot be clearly displayed, and I don’t know whether the input is right or wrong. For the sake of security, the password can be displayed, so how to implement it based on js code What about? When the user inputs, the password is displayed as a dot or asterisk. In order to ensure that the user input is correct, the user can click the button to display the password. Just watch the program effect first.

Interface structure, an outer pass-box, then add input and an i tag to the inner layer, and add corresponding class names to them.

<div class="pass-box">
<input type="password" name="pass" />
<i state="off"></i>
</div>

Now we add the corresponding attribute values ​​to the corresponding class. In this box, i needs to be above the input, so we need to give i a position attribute, and then adjust its top and right. Then set its width and height, Set its background image.

.pass-box {
width: 300px;
margin: 30px auto;
position: relative;
}
.pass-box input {
border: #cccccc 1px solid;
background-color: #fff;
color: #666;
padding: 10px;
width: 100%;
box-sizing: border-box;
}
.pass-box i{
display: inline-block;
width: 30px;
height: 30px;
position: absolute;
right: 5px;
top:5px;
background-image: none;
background-size: 200% 200%;
background-position: center;
}

In this way, the interface effect is completed. Then add a click event to i. In the HTML structure, we give i a state. This function is mainly used to judge the effect of the user's two clicks. Click the first time, the password is displayed; click The second time, the password is hidden. Repeat this action. So use this state to check its status.

The key point is to modify the type attribute of the input. When displayed, the type is text, and when hidden, it is password. Therefore, the logic processing of JS is relatively clear.

var ele_pass_box = document.getElementsByTagName("div")[0];
var ele_pass = ele_pass_box.getElementsByTagName("input")[0];
var ele_eye = ele_pass_box.getElementsByTagName("i")[0];
ele_eye.onclick = function () {
var state = this.getAttribute("state");
if(state === "off") {
ele_pass.setAttribute("type", "text");
ele_eye.setAttribute("state", "on");
ele_eye.style.opacity = 0.2;
} else {
ele_pass.setAttribute("type", "password");
ele_eye.setAttribute("state", "off");
ele_eye.style.opacity = 1;
}
}

This is the logic code, the amount of code is not much. When testing, just pay attention to the details.

The above is the entire content that the editor shared with you to hide and display form passwords based on JavaScript. I hope it will be helpful to everyone!