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>

它的内联样式从display：none切换到block 但是当我们点击其他地方时，它不会切换回来，因此它会保持可见，并为页面添加一些不必要的混乱。

由于我对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

这是隐藏安全提示div的html和jquery代码请在输入字段中使用函数“myFunction（）”

添加onfocusout事件

这是示例代码

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

您的js代码

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

和html代码

{{1}}

Answer 3

你可以通过CSS隐藏它

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

没有焦点时隐藏div

3 个答案: