小編給大家分享一下html中如何實(shí)現(xiàn)密碼隱藏顯示，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

站在用戶(hù)的角度思考問(wèn)題，與客戶(hù)深入溝通，找到泰和網(wǎng)站設(shè)計(jì)與泰和網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶(hù)體驗(yàn)好的作品，建站類(lèi)型包括：網(wǎng)站設(shè)計(jì)制作、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、國(guó)際域名空間、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋泰和地區(qū)。

html實(shí)現(xiàn)密碼隱藏顯示的方法：首先寫(xiě)好HTML界面標(biāo)簽以及css樣式；然后直接修改“type=text”和“type=password”來(lái)顯示和隱藏密碼輸入框即可。

本文操作環(huán)境：windows7系統(tǒng)、HTML5&&CSS3版、Dell G3電腦。

html怎么實(shí)現(xiàn)密碼隱藏顯示？

HTML5表單中password輸入框的文字顯示與隱藏實(shí)現(xiàn)

問(wèn)題描述與思路

HTML5表單中對(duì)于密碼輸入框password類(lèi)型可以隱藏用戶(hù)輸入的內(nèi)容，但有時(shí)候會(huì)用到允許用戶(hù)自由顯示或者隱藏輸入框內(nèi)容：要實(shí)現(xiàn)這個(gè)功能首先想到的是用js動(dòng)態(tài)改變input的type類(lèi)型，即將type = password變成type = text隱藏的密碼就會(huì)顯示，但是實(shí)際上卻實(shí)現(xiàn)不了，沒(méi)有效果，所以，只能換一個(gè)思路：

[更新：最新的type設(shè)置已經(jīng)奏效了，可以直接修改type=text和type=password來(lái)顯示和隱藏密碼輸入框了，更新后的代碼見(jiàn)下方，原方法請(qǐng)棄用]

放兩個(gè)input，一個(gè)是password，一個(gè)是text，共同監(jiān)聽(tīng)用戶(hù)的輸入事件，用戶(hù)每次切換我們用js控制兩個(gè)input的顯示與隱藏來(lái)實(shí)現(xiàn)此效果。

實(shí)現(xiàn)步驟：

首先寫(xiě)好HTML界面標(biāo)簽以及css樣式（其中的text的input開(kāi)始先隱藏：style="display:none"，后面顯示和隱藏操作也通過(guò)改變display的屬性來(lái)實(shí)現(xiàn)）

CSS:

body{
margin:0px;  
background-color: white; 
font-family: 'PT Sans', Helvetica, Arial, sans-serif;  
text-align: center;  
color: #A6A6A6;  
}
/*輸入框樣式，去掉背景陰影模仿原生應(yīng)用的輸入框*/
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;
}
/*輸入框底部半透明橫線(xiàn)*/
.input_block {
border-bottom: 1px solid rgba(0,0,0,.1);
}
/*container*/
#page_container{
margin: 50px;
}

HTML: