本文實例為大家分享了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";

}

}

附上圖片：

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

總結

以上是生活随笔為你收集整理的html输入密码自动隐藏,原生js实现密码输入框值的显示隐藏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。