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

準備：

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="JS實現表單中點選小眼睛顯示隱藏密碼框中的密碼" 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 密碼框點選小眼睛顯示隱藏密碼內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！