Скрыть div, когда он не в фокусе

Question

В drupal, редактируя форму профиля пользователя, этот div появляется, когда мы нажимаем (фокус) на поле пароля.

<div class="password-suggestions description" style="display: block;"> 
Security hints and tips : 
<ul><li>Tip #1 </li> 
<li>Tip #2</li></ul></div> 

Его встроенный стиль переключает с дисплея: никто не блокирует.
Но когда мы щелкаем в другом месте, он не переключается обратно, поэтому он остается видимым и добавляет ненужный беспорядок на страницу.

Поскольку я знаю очень мало javascript, мне нужна помощь, чтобы скрыть div-подсказки паролей, когда это не нужно.

Вот в JS, который обрабатывает это:

 Drupal.behaviors.password = { 
     attach: function (context, settings) { 
     var translate = settings.password; 
     $('input.password-field', context).once('password', function() { 
      var passwordInput = $(this); 
      var innerWrapper = $(this).parent(); 
      var outerWrapper = $(this).parent().parent(); 

      // Add identifying class to password element parent. 
      innerWrapper.addClass('password-parent'); 

      // Add the password confirmation layer. 
      $('input.password-confirm', outerWrapper).parent().prepend('<div class="password-confirm">' + translate['confirmTitle'] + ' <span></span></div>').addClass('confirm-parent'); 
      var confirmInput = $('input.password-confirm', outerWrapper); 
      var confirmResult = $('div.password-confirm', outerWrapper); 
      var confirmChild = $('span', confirmResult); 

      // Add the description box. 
      var passwordMeter = '<div class="password-strength"><div class="password-strength-text" aria-live="assertive"></div><div class="password-strength-title">' + translate['strengthTitle'] + '</div><div class="password-indicator"><div class="indicator"></div></div></div>'; 
      $(confirmInput).parent().after('<div class="password-suggestions description"></div>'); 
      $(innerWrapper).prepend(passwordMeter); 
      var passwordDescription = $('div.password-suggestions', outerWrapper).hide(); 

      // Check the password strength. 
      var passwordCheck = function() { 

      // Evaluate the password strength. 
      var result = Drupal.evaluatePasswordStrength(passwordInput.val(), settings.password); 

      // Update the suggestions for how to improve the password. 
      if (passwordDescription.html() != result.message) { 
       passwordDescription.html(result.message); 
      } 

      // Only show the description box if there is a weakness in the password. 
      if (result.strength == 100) { 
       passwordDescription.hide(); 
      } 
      else { 
       passwordDescription.show(); 
      } 

      // Adjust the length of the strength indicator. 
      $(innerWrapper).find('.indicator').css('width', result.strength + '%'); 

      // Update the strength indication text. 
      $(innerWrapper).find('.password-strength-text').html(result.indicatorText); 

      passwordCheckMatch(); 
      }; 

      // Check that password and confirmation inputs match. 
      var passwordCheckMatch = function() { 

      if (confirmInput.val()) { 
       var success = passwordInput.val() === confirmInput.val(); 

       // Show the confirm result. 
       confirmResult.css({ visibility: 'visible' }); 

       // Remove the previous styling if any exists. 
       if (this.confirmClass) { 
       confirmChild.removeClass(this.confirmClass); 
       } 

       // Fill in the success message and set the class accordingly. 
       var confirmClass = success ? 'ok' : 'error'; 
       confirmChild.html(translate['confirm' + (success ? 'Success' : 'Failure')]).addClass(confirmClass); 
       this.confirmClass = confirmClass; 
      } 
      else { 
       confirmResult.css({ visibility: 'hidden' }); 
      } 
      }; 

      // Monitor keyup and blur events. 
      // Blur must be used because a mouse paste does not trigger keyup. 
      passwordInput.keyup(passwordCheck).focus(passwordCheck).blur(passwordCheck); 
      confirmInput.keyup(passwordCheckMatch).blur(passwordCheckMatch); 
     }); 
     } 
    }; 

Answer 1

Вместо того, чтобы определять другую функцию и добавление атрибута, как и в другом ответе, вы должны просто цепь другой .blur() функции, например, так:

passwordInput.keyup(passwordCheck).focus(passwordCheck).blur(passwordCheck).blur(function() { $('div.password-suggestions').hide(); });

Answer 2

Вот HTML и код JQuery для сокрытия безопасности подсказки DIV добавьте onfocusout событие в поле ввода с функцией "MYFUNCTION()"

вот пример кода

<!DOCTYPE html> 
 
<html> 
 
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script></head> 
 
<body> 
 

 
Password: <input type="password" id="fname" onfocusout="myFunction()"> 
 
<div class="password-suggestions description" style="display: block;"> 
 
Security hints and tips : 
 
<ul><li>Tip #1 </li> 
 
<li>Tip #2</li></ul></div> 
 

 

 
<script> 
 
function myFunction() { 
 
    $('div.password-suggestions').hide(); 
 
} 
 
</script> 
 

 
</body> 
 
</html>

Ваш JS код

function myFunction() { 
     $('div.password-suggestions').hide(); 
    } 

и HTML код

<input type="text" id="fname" onfocusout="myFunction()"> 

Answer 3

Вы можете просто скрыть это через CSS

.password-suggestions:not(:focus) { 
    display: none !important; 
}