Question

我在输入框和CSS3 :invalid和:valid伪选择器上使用下面的代码和HTML5模式匹配来显示{{的有效值的有效值（有效值与否） 1}}在输入框旁边可用。这按预期工作，但它在页面加载本身和重新加载页面时显示验证标记（✘ - 无效输入）。我该怎样避免这个？

代码：

div.input-validation

Answer 1

您可以使用以下任一选项隐藏页面加载时的无效值（✘）符号。

选项1：隐藏包含页面加载符号的span，并仅在输入文本框中发生某些keypress事件时显示。

window.onload = function() {
  var el = document.querySelectorAll("input[type='text']");
  for (var i = 0; i < el.length; i++) {
    el[i].onkeypress = showSymbol;
  }

  function showSymbol() {
    this.nextElementSibling.style.display = "inline-block"; // display the span next to the input in which key was pressed.
  }
}

input {
  font-size: 1em;
  padding: .3em;
  border-radius: 3px;
  margin: .2em;
}
input[type="text"]:valid {
  color: green;
}
input[type="text"]:valid + .input-validation::before {
  content: "\2714";
  color: green;
}
input[type="text"]:invalid + .input-validation::before {
  content: "\2718";
  color: red;
}
.input-validation {
  display: none;
}

<input name="pw" autocomplete="off" type="text" id="pw" class="new" pattern="[a-zA-Z0-9]{6,22}" autofocus required/> <span class="input-validation"></span>

选项2：根据某个类的存在（例如visited）定义CSS规则，并仅在输入框中按下某个键时指定此类。

window.onload = function() {
  var el = document.querySelectorAll("input[type='text']");
  for (var i = 0; i < el.length; i++) {
    el[i].onkeypress = showSymbol;
  }

  function showSymbol() {
    this.classList.add("visited"); // add the visited class
  }
}

input {
  font-size: 1em;
  padding: .3em;
  border-radius: 3px;
  margin: .2em;
}
input[type="text"].visited:valid {
  color: green;
}
input[type="text"].visited:valid + .input-validation::before {
  content: "\2714";
  color: green;
}
input[type="text"].visited:invalid + .input-validation::before {
  content: "\2718";
  color: red;
}
.input-validation {
  display: inline-block;
}

<input name="pw" autocomplete="off" type="text" id="pw" class="new" pattern="[a-zA-Z0-9]{6,22}" autofocus required/> <span class="input-validation"></span>

注意：

我已使用~替换了CSS选择器中的+因为~选择了与选择器匹配的所有兄弟，而+仅选择相邻的兄弟。只要在第一个输入框中输入值，使用~就会显示所有输入框旁边的span（当表单中有多个输入框时）。
我还将.input-validation从div修改为span，但这更多是个人偏好，您可以保留原始div本身而不会有任何差异功能。

加载/重新加载页面时隐藏验证输出标记（✘）符号隐藏

1 个答案: