JS實現表單中點擊小眼睛顯示隱藏密碼框中的密碼
更新時間：2020年04月13日 16:32:26 作者：Cone0212
這篇文章主要介紹了JS實現表單中點擊小眼睛顯示隱藏密碼框中的密碼，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考價值,需要的朋友可以參考下
領導交個一個任務，要求在表單中點擊小眼睛顯示隱藏密碼框中的密碼！在一些網站中經常會用到這樣的功能，今天小編就給大家分享我的實現思路及代碼
準備：
1.兩張png圖片，一張睜眼，一張閉眼，可以到阿里巴巴矢量圖庫尋找（免費下載）
最終效果圖
css樣式部分，樣式可根據自己喜好設置，沒有過硬要求
<style>
div:first-child {
width: 300px;
height: 50px;
background-color: red;
color: white;
margin: 20px auto;
text-align: center;
line-height: 50px;
}
div:nth-child(2) {
position: relative;
width: 300px;
height: 50px;
margin: 100px auto;
}
input {
width: 300px;
height: 46px;
border: 0px white;
border-bottom: 1px solid black;
outline: none;
}
#eyes {
width: 18px;
position: absolute;
top: 27px;
right: 2px;
}
</style>
主體部分
<div>
密碼
</div>
<div>
<input type="password">
<!--默認閉眼圖-->
<label><img src="1.png" alt="" id="eyes"></label>
</div>
js部分
<script>
//獲取元素（兩種方式都可以）
var input = document.querySelector('input')
var imgs = document.getElementById('eyes');
//下面是一個判斷每次點擊的效果
var flag = 0;
imgs.onclick = function () {
if (flag == 0) {
input.type = 'text';
eyes.src = '2.png';//睜眼圖
flag = 1;
} else {
input.type = 'password';
eyes.src = '1.png';//閉眼圖
flag = 0;
}
}
</script>
總結
到此這篇關于JS實現表單中點擊小眼睛顯示隱藏密碼框中的密碼的文章就介紹到這了,更多相關js 密碼框點擊小眼睛顯示隱藏密碼內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本文給大家分享的是如何在APP中使用javascript結合CSS3實現下拉刷新特效的代碼，非常的簡單實用，有需要的小伙伴可以參考下。2016-01-01
解決layui中onchange失效以及form動態(tài)渲染失效的問題
今天小編就為大家分享一篇解決layui中onchange失效以及form動態(tài)渲染失效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了微信小程序訪問豆瓣電影api的實現方法,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
點擊按鈕清空頁面上所有的文本框、文本域，下面有個不錯的示例，大家可以參考下其具體實現2014-02-02
這篇文章主要介紹了JS上傳圖片預覽插件制作（兼容到IE6）的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
JavaScript中的數據很簡潔的。簡單數據只有 undefined, null, boolean, number和string這五種，而復雜數據只有一種，即object。2010-05-05
這篇文章主要為大家詳細介紹了js+html5實現手機九宮格密碼解鎖功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
對于學習JavaScript的初學者來說，變量提升是繞不過去的一個知識點,簡單來說變量提升就是 JS會把var變量的聲明自動提升到作用域的頂部,這篇文章主要給大家介紹了關于JavaScript變量提升的相關資料,需要的朋友可以參考下2021-09-09
最近在做算法題時,遇到需要創(chuàng)建二維數組并進行初始化的情況,剛開始我使用的是 new Array(n).fill(new Array(n).fill('.')) 進行二維數組的初始化,但無論怎樣我都通不過測試用例,所以本文就給大家詳細的介紹了如何解決這類問題以及將js中的fill（方法重學一下2023-09-09
下面小編就為大家?guī)硪黄猨s刪除局部變量的實現方法。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06