Pevent CSS 内容属性将被删除

Question

我有一个表格可以检查用户的密码强度。它工作正常并根据验证显示文本。但是当用户犯错并使用退格键重新输入密码时，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>

Answer 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>

Answer 2

@AndrewL64 我发现了问题 strengthText.classList.add("d-none"); 它使它显示 none。所以它删除了内容属性。所以如果设置了值。它应该有 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");
    }

Pevent CSS 内容属性将被删除

Pevent CSS content property to be removed

html

javascript

css

css-selectors

pseudo-element

Pevent CSS 内容 属性 将被删除

Pevent CSS content property to be removed

html

javascript

css

css-selectors

pseudo-element

Pevent CSS 内容属性将被删除