📋 複製

刪除

$(function(){

  var $input = $("#loginFixInline15");   // 真正的密碼輸入框

  var $eye   = $(".pw-eye");              // 眼睛 icon



  // 預設隱藏密碼

  $input.attr("type", "password");

  $eye.addClass("eye-close");



  // 按住眼睛 → 顯示密碼

  $eye.on("mousedown touchstart", function(){

    $input.attr("type", "text");

    $eye.removeClass("eye-close").addClass("eye-open")

        .attr("title", "隱藏密碼")

        .attr("aria-label", "隱藏密碼");

  });



  // 放開眼睛 → 恢復隱藏

  $eye.on("mouseup mouseleave touchend", function(){

    $input.attr("type", "password");

    $eye.removeClass("eye-open").addClass("eye-close")

        .attr("title", "顯示密碼")

        .attr("aria-label", "顯示密碼");

  });

});



.pw-eye {

  width: 28px;

  height: 28px;

  background-repeat: no-repeat;

  background-position: center;

  background-size: contain;

  cursor: pointer;

  display: inline-block;

  vertical-align: middle;

  margin-left: 8px; /* 和 checkbox 左邊對齊時可以調這裡 */

}



.pw-eye.eye-open  { background-image: url("/images/eye_open.svg"); }

.pw-eye.eye-close { background-image: url("/images/eye_close-01.svg"); }



<div class="loginFixInline14">

  密碼

  <div align="left" class="loginFixInline8">

    <input type="password" data-name="userPassword"

           autocomplete="off" maxlength="16" id="loginFixInline15">

    <div class="pw-eye eye-close" title="顯示密碼" aria-label="顯示密碼"></div>

  </div>

</div>

📋 複製

JChmdW5jdGlvbigpewoKICB2YXIgJGlucHV0ID0gJCgiI2xvZ2luRml4SW5saW5lMTUiKTsgICAvLyDnnJ/mraPnmoTlr4bnorzovLjlhaXmoYYKCiAgdmFyICRleWUgICA9ICQoIi5wdy1leWUiKTsgICAgICAgICAgICAgIC8vIOecvOedmyBpY29uCgoKCiAgLy8g6aCQ6Kit6Zqx6JeP5a+G56K8CgogICRpbnB1dC5hdHRyKCJ0eXBlIiwgInBhc3N3b3JkIik7CgogICRleWUuYWRkQ2xhc3MoImV5ZS1jbG9zZSIpOwoKCgogIC8vIOaMieS9j+ecvOedmyDihpIg6aGv56S65a+G56K8CgogICRleWUub24oIm1vdXNlZG93biB0b3VjaHN0YXJ0IiwgZnVuY3Rpb24oKXsKCiAgICAkaW5wdXQuYXR0cigidHlwZSIsICJ0ZXh0Iik7CgogICAgJGV5ZS5yZW1vdmVDbGFzcygiZXllLWNsb3NlIikuYWRkQ2xhc3MoImV5ZS1vcGVuIikKCiAgICAgICAgLmF0dHIoInRpdGxlIiwgIumaseiXj+WvhueivCIpCgogICAgICAgIC5hdHRyKCJhcmlhLWxhYmVsIiwgIumaseiXj+WvhueivCIpOwoKICB9KTsKCgoKICAvLyDmlL7plovnnLznnZsg4oaSIOaBouW+qemaseiXjwoKICAkZXllLm9uKCJtb3VzZXVwIG1vdXNlbGVhdmUgdG91Y2hlbmQiLCBmdW5jdGlvbigpewoKICAgICRpbnB1dC5hdHRyKCJ0eXBlIiwgInBhc3N3b3JkIik7CgogICAgJGV5ZS5yZW1vdmVDbGFzcygiZXllLW9wZW4iKS5hZGRDbGFzcygiZXllLWNsb3NlIikKCiAgICAgICAgLmF0dHIoInRpdGxlIiwgIumhr+ekuuWvhueivCIpCgogICAgICAgIC5hdHRyKCJhcmlhLWxhYmVsIiwgIumhr+ekuuWvhueivCIpOwoKICB9KTsKCn0pOwoKCgoucHctZXllIHsKCiAgd2lkdGg6IDI4cHg7CgogIGhlaWdodDogMjhweDsKCiAgYmFja2dyb3VuZC1yZXBlYXQ6IG5vLXJlcGVhdDsKCiAgYmFja2dyb3VuZC1wb3NpdGlvbjogY2VudGVyOwoKICBiYWNrZ3JvdW5kLXNpemU6IGNvbnRhaW47CgogIGN1cnNvcjogcG9pbnRlcjsKCiAgZGlzcGxheTogaW5saW5lLWJsb2NrOwoKICB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlOwoKICBtYXJnaW4tbGVmdDogOHB4OyAvKiDlkowgY2hlY2tib3gg5bem6YKK5bCN6b2K5pmC5Y+v5Lul6Kq/6YCZ6KOhICovCgp9CgoKCi5wdy1leWUuZXllLW9wZW4gIHsgYmFja2dyb3VuZC1pbWFnZTogdXJsKCIvaW1hZ2VzL2V5ZV9vcGVuLnN2ZyIpOyB9CgoucHctZXllLmV5ZS1jbG9zZSB7IGJhY2tncm91bmQtaW1hZ2U6IHVybCgiL2ltYWdlcy9leWVfY2xvc2UtMDEuc3ZnIik7IH0KCgoKPGRpdiBjbGFzcz0ibG9naW5GaXhJbmxpbmUxNCI+CgogIOWvhueivAoKICA8ZGl2IGFsaWduPSJsZWZ0IiBjbGFzcz0ibG9naW5GaXhJbmxpbmU4Ij4KCiAgICA8aW5wdXQgdHlwZT0icGFzc3dvcmQiIGRhdGEtbmFtZT0idXNlclBhc3N3b3JkIgoKICAgICAgICAgICBhdXRvY29tcGxldGU9Im9mZiIgbWF4bGVuZ3RoPSIxNiIgaWQ9ImxvZ2luRml4SW5saW5lMTUiPgoKICAgIDxkaXYgY2xhc3M9InB3LWV5ZSBleWUtY2xvc2UiIHRpdGxlPSLpoa/npLrlr4bnorwiIGFyaWEtbGFiZWw9Iumhr+ekuuWvhueivCI+PC9kaXY+CgogIDwvZGl2PgoKPC9kaXY+Cg==