Question

我试图使“提交”按钮仅在人们在三个输入框中以相同的顺序写数字0 4 2时可用。

我知道使用JS可以轻松实现，但是我想知道是否也可以仅使用HTML。

以下是示例链接：https://scontent.fskp1-1.fna.fbcdn.net/v/t1.15752-9/122988049_648515422431558_1560231741132468095_n.png?_nc_cat=109&ccb=2&_nc_sid=ae9488&_nc_ohc=lPPHXpw9wZkAX8pk002&_nc_ht=scontent.fskp1-1.fna&oh=05c12b348cca4c9546d465f41f074603&oe=5FBF87D0

<form action="#">
        <input class="code" type="text" required="required">
        <input class="code" type="text" required="required">
        <input class="code" type="text" required="required"> <br>
    <input type="submit" value="Unlock" />
</form>

Answer 1

虽然可行，但这是一个愚蠢的CSS技巧，没有太大的灵活性，实际上不应该在生产中使用。

input[type=submit] {
  pointer-events: none;
  color: red;
}
input:valid + input:valid + input:valid + br + input[type=submit] {
  pointer-events: auto;
  color: green;
}

<form action="#">
    <input class="code" type="text" required="required" pattern="0">
    <input class="code" type="text" required="required" pattern="4">
    <input class="code" type="text" required="required" pattern="2"><br>
    <input type="submit" value="Unlock" />
</form>

:valid pseudo-class匹配经过验证的输入，+匹配相邻的兄弟姐妹。 pointer-events: none;阻止点击。

pattern属性设置一个正则表达式来验证字段。

有没有一种方法可以使SUBMIT按钮仅在输入中仅使用HTML的特定代码可用？

1 个答案: