Показать/скрыть пароль

Показать/скрыть пароль в форме ввода

  1. Чтобы включить отображение пароля в поле password нужно заменить атрибут type="password" на type="text", сделать это можно на jQuery или чистом JS.Показать пароль по чекбоксу

  1. <div class="password">
  2. <input type="password" id="password-input" placeholder="Введите пароль" name="password">
  3. <label><input type="checkbox" class="password-checkbox"> Показать пароль</label>
  4. </div>
  5. 

  1. $('body').on('click', '.password-checkbox', function(){
  2. if ($(this).is(':checked')){
  3. $('#password-input').attr('type', 'text');
  4. } else {
  5. $('#password-input').attr('type', 'password');
  6. }
  7. });

Показать пароль по ссылке
  1. <div class="password">
  2. <input type="password" id="password-input" placeholder="Введите пароль" name="password">
  3. <a href="#" class="password-control">Показать пароль</a>
  4. </div>

  1. $('body').on('click', '.password-control', function(){
  2. if ($('#password-input').attr('type') == 'password'){
  3. $(this).html('Скрыть пароль');
  4. $('#password-input').attr('type', 'text');
  5. } else {
  6. $(this).html('Показать пароль');
  7. $('#password-input').attr('type', 'password');
  8. }
  9. return false;
  10. });

Показать пароль по иконке
  1. <div class="password">
  2. <input type="password" id="password-input" placeholder="Введите пароль" name="password">
  3. <a href="#" class="password-control"></a>
  4. </div>

  1. .password {
  2. position: relative;
  3. }
  4. .password-control {
  5. position: absolute;
  6. top: 11px;
  7. right: 6px;
  8. display: inline-block;
  9. width: 20px;
  10. height: 20px;
  11. background: url(/view.svg) 0 0 no-repeat;
  12. }
  13. .password-control.view {
  14. background: url(/no-view.svg) 0 0 no-repeat;
  15. }
  16.  
  17. $('body').on('click', '.password-control', function(){
  18. if ($('#password-input').attr('type') == 'password'){
  19. $(this).addClass('view');
  20. $('#password-input').attr('type', 'text');
  21. } else {
  22. $(this).removeClass('view');
  23. $('#password-input').attr('type', 'password');
  24. }
  25. return false;
  26. });

Без jQuery
  1. <div class="password">
  2. <input type="password" id="password-input" placeholder="Введите пароль" name="password">
  3. <a href="#" class="password-control" onclick="return show_hide_password(this);"></a>
  4. </div>

  1. function show_hide_password(target){
  2. var input = document.getElementById('password-input');
  3. if (input.getAttribute('type') == 'password') {
  4. target.classList.add('view');
  5. input.setAttribute('type', 'text');
  6. } else {
  7. target.classList.remove('view');
  8. input.setAttribute('type', 'password');
  9. }
  10. return false;
  11. }


  29.05.24 / 07:10 | PHP |   169 | 4   0