有没有办法只通过 CSS 来确定 input 标签是否有输入?
我有这个想法是因为我想完成一个自动补全的 input 部件, 最基本的功能是:
如果 input 没有内容, 这隐藏下拉框
反之, 显示下拉框
我找到了一个也许不是很完美的实现方案, 描述中可能会有一些细微的区别, 不过我还是很希望能做这个简单的分享
首先, 我们构造一个简单的 form 表单, 仅仅只有一个 input
- <form>
- <label for="input"> 输入框 </label>
- <input type="text" id="input"/>
- </form>
当输入一些值, 我设置 input 的边框颜色为绿的, 下面是一个例子:
gif
判断 input 是否为空
我通过 html 表单验证去判断是否为空, 所以, 这里我使用了 required 属性
- <form>
- <label> Input </label>
- <input type="text" name="input" id="input" required />
- </form>
- // valid: 当 input 输入值也合法值时采用的样式
- #input:valid{
- border-color: green;
- }
这时, 当有输入的时候, input 表现的很好, 边框颜色也有了相应的变化:
gif
但是, 这里有个问题, 如果用户输入的是空格, 那么边框颜色也会发生改变.
[站外图片上传中...(image-9adfa1-1575421399819)]
原理上看, 这种表现是正常的, 因为输入框确实有了内容.
但是, 实际上, 我不想让空格来触发自动补全弹窗
所以这还不能满足我们的需求, 我要做更细致的检查
进一步完善
HTML 提供我们利用正则去验证输入框内容的属性: pattern, 这里也尝试使用该属性来完善
因为想把空格视为非法输入, 我使用 \ S+, 这个很简单, 匹配一个或者多个任何非空白字符
- <form>
- <label> Input </label>
- <input type="text" name="input" id="input" required pattern="\S+"/>
- </form>
使用这种方式, 的确奏效了, 如果用户输入空格, 输入框没有任何变化
[站外图片上传中...(image-78ad31-1575421399819)]
但了个是, 但是这个正则还是有问题, 因为只允许输入非空白字符, 所以你在任何位置输入空白都会导致输入框校验失败
[站外图片上传中...(image-abd68a-1575421399819)]
这里可以使用其他的正则来匹配, 比如 \^\S+?.+
- <form>
- <label> Input </label>
- <input type="text" name="input" id="input" required pattern="\S+.*"/>
- </form>
现在输入框可以和空格混合输入了!
但是如果当前校验失败, 输入框没有任何提示, 这很不友好!
但我写这篇文章的时候, 有一个问题我不断思考, 能不能只用 CSS 给非法验证也加一种样式?
输入无效
这里不能使用: invalid, 因为有 required 字段, 即使我们什么也不做, 输入框也会有非正确状态的样式提示, 这很奇怪.
查看了相关资源, 我们可以使用: placeholder-shown 来达到我们的目的
大概思路是:
增加 placeholder
如果输入框如果用户输入了内容, 但还不合法做一个处理
最后利用 CSS 的覆盖特性, 添加一个当验证成功的样式处理
最终的 CSS 大概是这样
- /* 当填充的时候展示红色, 所以这里默认是校验失败 */
- input:not(:placeholder-shown) {
- border-color: hsl(0, 76%, 50%);
- }
- /* 当验证成功的时候, 采用这个样式 */
- input:valid {
- border-color: hsl(120, 76%, 50%);
- }
这里有一个小小的 demo
总结
上面的内容就是如何只用 CSS 来提供一个基础表单验证功能, 说是只用 CSS, 其实也利用的 pattern 能接受正则表达式, 哈哈, 所以最根本的是如何写出最优的正则表达式.
来源: http://www.jianshu.com/p/4bbf9521c579