当焦点不集中时隐藏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

你可以通过CSS来隐藏它

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

Answer 2

这里是用于隐藏安全提示div的html和jquery代码，请在输入字段中添加带有"myFunction()“函数的onfocusout事件。

下面是示例代码

<!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()">