html输入密码自动隐藏,原生js实现密码输入框值的显示隐藏

本文实例为大家分享了js显示隐藏密码输入框值的具体代码，供大家参考，具体内容如下

直接贴上代码

password intput demo

body{

margin:0px;

background-color: white;

font-family: 'PT Sans', Helvetica, Arial, sans-serif;

text-align: center;

color: #A6A6A6;

}

/*输入框样式，去掉背景阴影模仿原生应用的输入框*/

input{

width: 100%;

height: 50px;

border:none;

padding-left:3px;

font-size: 18px;

}

input:focus {

outline: none;

}

/*显示\隐藏密码图片*/

img{

width: 40px;

height: 25px;

position: absolute;

right: 0px;

margin: 15px;

}

/*登录按钮*/

button{

width: 200px;

height: 50px;

margin-top: 25px;

background: #1E90FF;

border-radius: 10px;

border:none;

font-size: 18px;

font-weight: 700;

color: #fff;

}

button:hover {

background: #79A84B;

outline: 0;

}

/*输入框底部半透明横线*/

.input_block {

border-bottom: 1px solid rgba(0,0,0,.1);

}

/*container*/

#page_container{

margin: 50px;

}

Login

// 这里使用最原始的js语法实现，可对应换成jquery语法进行逻辑控制

var demoImg = document.getElementById("demo_img");

var demoInput = document.getElementById("demo_input");

//隐藏text block，显示password block

function hideShowPsw(){

if (demoInput.type == "password") {

demoInput.type = "text";

demo_img.src = "invisible.png";

}else {

demoInput.type = "password";

demo_img.src = "visible.png";

}

}

附上图片：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。