久久r热视频,国产午夜精品一区二区三区视频,亚洲精品自拍偷拍,欧美日韩精品二区

您的位置:首頁技術文章
文章詳情頁

JS實現表單中點擊小眼睛顯示隱藏密碼框中的密碼

瀏覽:140日期:2024-05-12 16:01:50

領導交個一個任務,要求在表單中點擊小眼睛顯示隱藏密碼框中的密碼!在一些網站中經常會用到這樣的功能,今天小編就給大家分享我的實現思路及代碼

準備:

1.兩張png圖片,一張睜眼,一張閉眼,可以到阿里巴巴矢量圖庫尋找(免費下載)

JS實現表單中點擊小眼睛顯示隱藏密碼框中的密碼JS實現表單中點擊小眼睛顯示隱藏密碼框中的密碼

最終效果圖

JS實現表單中點擊小眼睛顯示隱藏密碼框中的密碼JS實現表單中點擊小眼睛顯示隱藏密碼框中的密碼

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='http://m.baoyu77737.com/bcjs/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 密碼框點擊小眼睛顯示隱藏密碼內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網!

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 黔西| 辛集市| 会泽县| 云霄县| 宽城| 晋州市| 汉阴县| 泰宁县| 南皮县| 新巴尔虎右旗| 炉霍县| 乐陵市| 武定县| 嘉义县| 清水河县| 磐石市| 宜黄县| 福安市| 武定县| 精河县| 崇州市| 盈江县| 湄潭县| 阳泉市| 宾阳县| 武宣县| 海丰县| 永春县| 宜阳县| 阳泉市| 琼中| 福贡县| 苍南县| 平乡县| 工布江达县| 高安市| 廊坊市| 盘山县| 彰化市| 宁武县| 涿鹿县|