使用 CSS 检查输入是否为空

仅通过 CSS 就能知道输入是否为空吗？

当我尝试为“学习 JavaScript”制作一个自动完成组件时，我遇到了这个问题。基本上，我想：

1. 如果输入为空则隐藏下拉菜单
2. 如果输入已填写，则显示下拉菜单

我找到了一种方法。虽然它并不完美，也有一些细微的差别，但我想和大家分享一下。

表格

首先，让我们创建一个表单，以便我们能够保持一致。我们将使用一个只有一个输入框的简单表单。

<form>
  <label for="input"> Input </label>
  <input type="text" id="input" />
</form>

当输入框填满后，我们希望将其变为border-color绿色。以下是我们正在创建的示例：

检查输入是否为空

我依靠 HTML 表单验证来检查输入是否为空。这意味着我需要一个required属性。

<form>
  <label> Input </label>
  <input type="text" name="input" id="input" required />
</form>

此时，输入填满后，界面显示正常。边框变为绿色。

但有一个问题：如果用户在字段中输入空格，边框也会变成绿色。

从技术上讲，这是正确的。输入框被填充是因为用户在其中输入了内容。

但我不希望空格触发空白下拉菜单（对于自动完成组件）。

这还不够。我需要更严格的检查。

进一步检查

HTML 允许你使用正则表达式和pattern属性来验证输入。我决定测试一下。

因为我不想识别空格，所以我从\S+模式开始。这个模式的意思是：一个或多个非空格字符。

<form>
  <label> Input </label>
  <input type="text" name="input" id="input" required pattern="\S+"/>
</form>

果然，它成功了。如果用户在字段中输入空格，则输入不会得到验证。

但是当在输入中的任何地方输入空格时，输入就会变得无效。

不幸的是，这种模式在我的用例中不起作用。

在学习 JavaScript 的自动完成组件中，我教学生如何完成国家/地区列表。有些国家/地区的名称带有空格……

我必须在混合中加入空格。

我能想到的下一个最佳选择是\S+.*。这意味着一个或多个非空白字符，后跟零个或多个（任意）字符。

<form>
  <label> Input </label>
  <input type="text" name="input" id="input" required pattern="\S+.*"/>
</form>

成功了！现在可以输入空格了！

但还有一个问题...如果以空格开头，则输入将无法验证...

这就是我无法解决的问题。稍后我会详细介绍。

在写这篇文章的时候，我又遇到了一个有趣的问题：当输入填写错误时，是否可以设置无效状态的样式？

使输入无效

我们不想使用，:invalid因为我们会以无效状态启动输入。（当输入为空时，它已经无效了）。

这时，Chris Coyier 便带着“ HTML 和 CSS 中的表单验证 UX ”来拯救我们了。

在文章中，Chris 讨论了:placeholder-shown伪类。它可以用来检查占位符是否显示。

这个想法是：

1. 您在输入中添加占位符
2. 如果输入被隐藏，则表示用户在字段中输入了内容
3. 继续验证（或无效）

这是 CSS（简化版本。完整版本，请查看Chris 的文章）

/* Show red borders when filled, but invalid */
input:not(:placeholder-shown) {
  border-color: hsl(0, 76%, 50%);
}

由于我同时具有验证和无效样式，因此我必须确保有效样式在无效样式之后。

/* Show red borders when filled, but invalid */
input:not(:placeholder-shown) {
  border-color: hsl(0, 76%, 50%);;
}

/* Show green borders when valid */
input:valid {
  border-color: hsl(120, 76%, 50%);
}

以下是供您试用的演示：

请参阅Zell Liew ( @zellwk ) 在CodePen上的Pen Pure CSS Empty 验证。

注意：Edge 不支持:placeholder-shown，因此在生产环境中使用它可能不是一个好主意。目前还没有好的方法来检测此功能。

现在回到我无法解决的问题。

模式问题

这个pattern属性很棒，因为它允许你接受一个正则表达式。这个正则表达式允许你用任何你能想到的方法来验证输入。

但是……正则表达式必须与文本完全匹配。如果文本没有完全匹配，则输入无效。

这就造成了我上面提到的问题。（问题提醒：如果用户先输入空格，则输入无效）。

我找不到一个能满足我所有想到的用例的正则表达式。如果你想尝试创建一个我需要的正则表达式，我非常欢迎你的帮助！

以下是用例：

// Should not match
''
' '
'  '
'   '

// Should match
'one-word'
'one-word '
' one-word'
' one-word '
'one phrase with whitespace'
'one phrase with whitespace '
' one phrase with whitespace'
' one phrase with whitespace '

（不过，我可能想太多了……🙄）。

更新：问题解决了！

许多读者慷慨地通过电子邮件将他们的解决方案发给我。我要感谢每一位提供帮助的人。非常感谢！

我收到的最干净的解决方案是：Daniel O'Connor.*\S.*提供的。这意味着：

• .*：任意字符
• \S: 后跟一个非空白字符
• .*: 后跟任意字符

我收到的其他正则表达式包括：

• .*\S+.*作者：马特·明克 (Matt Mink)。
• \s*\S.*作者Sungbin Jo
• ^\s?(?=\S).康斯坦丁的展望

还有很多其他的！

这是 Daniel 更新的解决方案的代码笔：

请参阅Zell Liew ( @zellwk ) 在CodePen上的Pen Pure CSS Empty 验证。

总结

是的，可以使用纯 CSS 验证表单，但是当涉及空格字符时，验证可能会出现问题。

如果你不介意空格的话，效果会很好。祝你尝试这个模式愉快！（抱歉，我实在忍不住）。

感谢阅读。本文最初发布在我的博客上。如果您想阅读更多文章来帮助您成为更优秀的前端开发人员，请订阅我的新闻通讯。