📋 複製

刪除

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<script>

$(function(){

  $('.pw-toggle').on('click', function(){

    var $btn = $(this);

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

    var isHidden = $input.attr('type') === 'password';



    // 切換 type

    $input.attr('type', isHidden ? 'text' : 'password');



    // 無障礙屬性

    $btn.attr('aria-pressed', isHidden);

    $btn.attr('aria-label', isHidden ? '隱藏密碼' : '顯示密碼');



    // 換圖檔

    $btn.find('img').attr('src', isHidden ? 'eye-close.svg' : 'eye-open.svg');



    // 保持焦點在輸入框

    $input.trigger('focus');

  });

});

</script>



<style>

  .pw-wrap { position: relative; }

  #loginFixInline15 { padding-right: 2.6em; }

  .pw-toggle {

    position:absolute; right:.4rem; top:50%;

    transform:translateY(-50%);

    border:none; background:transparent;

    cursor:pointer; padding:.2rem;

    display:flex; align-items:center; justify-content:center;

  }

  .pw-toggle img { pointer-events:none; }

</style>

📋 複製

PHNjcmlwdCBzcmM9Imh0dHBzOi8vY29kZS5qcXVlcnkuY29tL2pxdWVyeS0zLjcuMS5taW4uanMiPjwvc2NyaXB0PgoKPHNjcmlwdD4KCiQoZnVuY3Rpb24oKXsKCiAgJCgnLnB3LXRvZ2dsZScpLm9uKCdjbGljaycsIGZ1bmN0aW9uKCl7CgogICAgdmFyICRidG4gPSAkKHRoaXMpOwoKICAgIHZhciAkaW5wdXQgPSAkKCcjbG9naW5GaXhJbmxpbmUxNScpOyAgICAgICAvLyDnnJ/mraPnmoTlr4bnorzmoYYKCiAgICB2YXIgaXNIaWRkZW4gPSAkaW5wdXQuYXR0cigndHlwZScpID09PSAncGFzc3dvcmQnOwoKCgogICAgLy8g5YiH5o+bIHR5cGUKCiAgICAkaW5wdXQuYXR0cigndHlwZScsIGlzSGlkZGVuID8gJ3RleHQnIDogJ3Bhc3N3b3JkJyk7CgoKCiAgICAvLyDnhKHpmpznpJnlsazmgKcKCiAgICAkYnRuLmF0dHIoJ2FyaWEtcHJlc3NlZCcsIGlzSGlkZGVuKTsKCiAgICAkYnRuLmF0dHIoJ2FyaWEtbGFiZWwnLCBpc0hpZGRlbiA/ICfpmrHol4/lr4bnorwnIDogJ+mhr+ekuuWvhueivCcpOwoKCgogICAgLy8g5o+b5ZyW5qqUCgogICAgJGJ0bi5maW5kKCdpbWcnKS5hdHRyKCdzcmMnLCBpc0hpZGRlbiA/ICdleWUtY2xvc2Uuc3ZnJyA6ICdleWUtb3Blbi5zdmcnKTsKCgoKICAgIC8vIOS/neaMgeeEpum7nuWcqOi8uOWFpeahhgoKICAgICRpbnB1dC50cmlnZ2VyKCdmb2N1cycpOwoKICB9KTsKCn0pOwoKPC9zY3JpcHQ+CgoKCjxzdHlsZT4KCiAgLnB3LXdyYXAgeyBwb3NpdGlvbjogcmVsYXRpdmU7IH0KCiAgI2xvZ2luRml4SW5saW5lMTUgeyBwYWRkaW5nLXJpZ2h0OiAyLjZlbTsgfQoKICAucHctdG9nZ2xlIHsKCiAgICBwb3NpdGlvbjphYnNvbHV0ZTsgcmlnaHQ6LjRyZW07IHRvcDo1MCU7CgogICAgdHJhbnNmb3JtOnRyYW5zbGF0ZVkoLTUwJSk7CgogICAgYm9yZGVyOm5vbmU7IGJhY2tncm91bmQ6dHJhbnNwYXJlbnQ7CgogICAgY3Vyc29yOnBvaW50ZXI7IHBhZGRpbmc6LjJyZW07CgogICAgZGlzcGxheTpmbGV4OyBhbGlnbi1pdGVtczpjZW50ZXI7IGp1c3RpZnktY29udGVudDpjZW50ZXI7CgogIH0KCiAgLnB3LXRvZ2dsZSBpbWcgeyBwb2ludGVyLWV2ZW50czpub25lOyB9Cgo8L3N0eWxlPgo=