JS實現(xiàn)表單中點擊小眼睛顯示隱藏密碼框中的密碼

更新時間：2020年04月13日 16:32:26 作者：Cone0212

這篇文章主要介紹了JS實現(xiàn)表單中點擊小眼睛顯示隱藏密碼框中的密碼，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考價值,需要的朋友可以參考下

領(lǐng)導交個一個任務，要求在表單中點擊小眼睛顯示隱藏密碼框中的密碼！在一些網(wǎng)站中經(jīng)常會用到這樣的功能，今天小編就給大家分享我的實現(xiàn)思路及代碼

準備：

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

在這里插入圖片描述

最終效果圖

在這里插入圖片描述

css樣式部分，樣式可根據(jù)自己喜好設(shè)置，沒有過硬要求

<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>

總結(jié)

到此這篇關(guān)于JS實現(xiàn)表單中點擊小眼睛顯示隱藏密碼框中的密碼的文章就介紹到這了,更多相關(guān)js 密碼框點擊小眼睛顯示隱藏密碼內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: