目標(biāo)：

點(diǎn)擊小眼睛后，

1、密碼框變成文本框；

2、小眼睛圖片由閉眼變成睜眼；

3、再次點(diǎn)擊后，又變成閉眼+密碼框

要想實(shí)現(xiàn)3，方法1：

則需要一個(gè)變量，來(lái)輔助判斷當(dāng)前input的屬性，如果flag為0，則在點(diǎn)擊后，將input的type屬性改為text框，同時(shí)，再將flag值重新賦為1.此時(shí)，再次點(diǎn)擊，又會(huì)進(jìn)行判斷，而這次的flag=1，所以，就直接將input的type屬性改為了password

要想實(shí)現(xiàn)3，方法2：

直接對(duì)input的type屬性進(jìn)行判斷，若為text，則改為password，若為password，則改為text。

代碼如下：

Document

/*設(shè)置父盒子的樣式*/

div {

position: relative;

width: 400px;

border-bottom: 2px solid #ccc;

margin: 100px auto;

}

/*設(shè)置密碼框的樣式*/

input {

width: 370px;

height: 30px;

border: none;

outline: none;

}

/*利用定位，設(shè)置小眼睛圖片樣式*/

img {

position: absolute;

top: 5px;

right: 1px;

width: 24px;

}

//步驟：

//1、獲取元素

var ipt = document.querySelector('input');

var img = document.querySelector('img');

//2、注冊(cè)事件

//方法1：

// var flag = 0;

// img.onclick = function() {

// if (flag == 0) {

// ipt.type = 'text';

// img.src = './images/open.png';

// flag = 1;

// } else {

// ipt.type = 'password';

// img.src = './images/close.png';

// flag = 0;

// }

// }

//方法2：

img.onclick = function() {

if (ipt.type === 'password') {

ipt.type = 'text';

img.src = './images/open.png';

} else {

ipt.type = 'password';

img.src = './images/close.png';

}

}

圖片是找的京東上的眼睛睜閉圖，如果想要測(cè)試，可以不用img圖片，給 i 標(biāo)簽設(shè)置寬高并定位，給一個(gè)背景色，寫JS時(shí)，可以將 i 標(biāo)簽設(shè)置成事件源，通過(guò)點(diǎn)擊 i 標(biāo)簽的范圍，來(lái)切換input的type屬性。

與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的html密码框不显示,密码框中密码的显示与隐藏切换(JS)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。