How to implement password visibility switching (show and hide) in JavaScript

The content of this article is about how to implement password visibility switching (showing and hiding) in JavaScript. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

# Everyone has probably seen the effect of front-end password visibility switching (showing and hiding), so I won’t say more.

By default, the input tag of the entered password is type="password", and the default password is represented by a dot or asterisk. To make the password visible, we need to change the type to "text". This effect can be easily achieved by modifying the type attribute of the input tag in browsers such as Chrome and FireFox, but an error will be reported under IE. If you need compatibility with IE, you must consider other options.

There are a few points to note here:

The example uses the replacement of the entire input tag scheme, so it is compatible with IE

The eye chart uses iconfont, so use CSS Switching is relatively simple.

In the IE10 browser, when you encounter a password input box, a small eye icon will be displayed in the box. After clicking, the password will also be displayed. If it is an ordinary text input box, IE10 will automatically display it. A small cross can be clicked to clear the entered content in the text box. If you do not want the two functions that come with IE10 to take effect, you can add it to the CSS:

CSS code:

input::-ms-clear {display:none;}
input::-ms-reveal {display:none;}

These two CSS definitions for IE browser can remove the automatic text clearing and password display functions of IE browser.

The above is a complete introduction to how JavaScript implements password visibility switching (showing and hiding). If you want to know more about JavaScript Tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of How to implement password visibility switching (show and hide) in JavaScript. For more information, please follow other related articles on the PHP Chinese website!