防止移除 CSS 内容属性答案

【问题标题】：Pevent CSS content property to be removed防止移除 CSS 内容属性
【发布时间】：2020-04-15 12:30:19
【问题描述】：

我有一个用于检查用户密码强度的表单。它可以正常工作并根据验证显示文本。但是当用户出错并使用退格键重新输入密码时，data-text 中的文本不再显示，因为 CSS 中的 content 属性正在被删除（我猜是因为退格键）。我找不到阻止它被删除的解决方案。

// Password field
self.addEventListener("keyup", () => {
  let val = self.value;
  testPasswordStrength(val);
});

// check password strength
const testPasswordStrength = (value) => {
  const strengthText = document.getElementsByClassName('js-password-strength')[0];
  const strongRegex = new RegExp(
      '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[=/\()%ยง!@#$%^&*])(?=.{8,})'
    ),
    mediumRegex = new RegExp(
      '^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})'
    );

  if (value) {
    if (strongRegex.test(value)) {
      strengthText.setAttribute('data-validation-text', strengthText.dataset.textStrong);
      return "strong";
    } else if (mediumRegex.test(value)) {
      strengthText.setAttribute('data-validation-text', strengthText.dataset.textGood);
      return "medium";
    } else {
      strengthText.setAttribute('data-validation-text', strengthText.dataset.textDefault);
      return "weak";
    }
  } else {
    strengthText.classList.add("d-none");
  }
};

content: attr(data-validation-text);

<div class="js-password-strength" data-validation-text data-text-default="Password must be 8+ characters" data-text-good="Good password" data-text-strong="Great password">
</div>

【问题讨论】：

即使使用了退格键，您当前的代码似乎也能正常工作，如下所示：jsfiddle.net/AndrewL64/gxryo6pc/10
@AndrewL64 我找到了解决方案并发布了答案。

标签： javascript html css css-selectors pseudo-element

【解决方案1】：

这适合你吗

// Password field
const passwordField = document.getElementsByClassName('js-password-strength')[0];
passwordField.addEventListener("keyup", () => {
   let val = passwordField.textContent;
   testPasswordStrength(val);
});

// check password strength
const testPasswordStrength = (value) => {
;
    const strongRegex = new RegExp(
        '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[=/\()%ยง!@#$%^&*])(?=.{8,})'
        ),
        mediumRegex = new RegExp(
            '^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})'
        );

    if (value) {
        if (strongRegex.test(value)) {
            passwordField.setAttribute('data-validation-text', passwordField.dataset.textStrong);
            return "strong";
        } else if (mediumRegex.test(value)) {
            passwordField.setAttribute('data-validation-text', passwordField.dataset.textGood);
            return "medium";
        } else {
            passwordField.setAttribute('data-validation-text', passwordField.dataset.textDefault);
            return "weak";
        }
    } else {
        passwordField.classList.add("d-none");
    }
};

.js-password-strength{
  border:1px solid #000;
}
.js-password-strength:after{
content: attr(data-validation-text);
font-size:12px;
color:#666;
}

<html>
   <head>
   </head>
   <body>
      <div class="js-password-strength"
      data-validation-text
      data-text-default="Password must be 8+ characters"
      data-text-good="Good password"
      data-text-strong="Great password" contenteditable=true>
      </div>
   </body>
<html>

【讨论】：

【解决方案2】：

@AndrewL64 我发现了问题strengthText.classList.add("d-none"); 它使它不显示。所以它删除了 content 属性。因此，如果设置了值。它应该有display: block

 if (value) {
        strengthText.classList.remove("d-none");
        strengthText.classList.add("d-block");
        if (strongRegex.test(value)) {
            strengthText.setAttribute('data-validation-text', strengthText.dataset.textStrong);
            return "strong";
        } else if (mediumRegex.test(value)) {
            strengthText.setAttribute('data-validation-text', strengthText.dataset.textGood);
            return "medium";
        } else {
            strengthText.setAttribute('data-validation-text', strengthText.dataset.textDefault);
            return "weak";
        }
    } else {
        strengthText.classList.remove("d-block");
        strengthText.classList.add("d-none");
    }

【讨论】：