使用纯 CSS 实现仿 Material Design 的 input 过渡效果

之前一段时间，基于对 next 与 graphql 的调研，再加上本人的兴趣，我作了一个站点，也做为我之后各类技术折腾，实践以及兴趣交汇的试验田。

最近我须要在个人实验田使用 jwt 实践校验码的功能。校验码，就是指注册时邮箱或者短信的校验码。须要校验码则须要有登陆注册，而在登陆注册时，为了多写一些 CSS，我决定实现一个 Material Design 的表单过渡效果。

实现效果见 诗词弦歌 - 登陆

开始以前，你先看看是否定识如下几个选择器。若是不，那么经过本文你能够学习到如下几个选择器，以及他们的试用场景

• :not(:empty)
• input:not([value=""])
• input:valid
• input:not(:placeholder-shown)

本文地址见 shanyue.tech/post/login-…

问题概述

至于 Material Design 是什么样的效果，如上所示。实现以上效果，能够简单把问题归结为如下两点的实现

1. 当 input 中没有值且没有得到焦点时，hint 信息灰色呈如今 input 框内
2. 当 input 获取到焦点或者有值时，hint 信息以动画形式位移到 input 上方

直接把 html 和 css 代码贴上来，先来完成简单的功能

label 置于 input 后边，方便经过 ~ 与 + 选择器定位。

form
  .input-wrapper
    input[type="text"]
    label
  .input-wrapper
    input[type="password"]
    label
复制代码

CSS 代码以下，label 初始时经过绝对定位置于 input 的 placeholder 位置，input 得到焦点时的 label 的 CSS Selector 也很容易经过 input:focus + label 肯定

label {
  /* 定位到input框中 */
  position: absolute;
  bottom: 10px;
  left: 0;
  font-size: 1.2em;
  color: #ccc;
  transition: all ease 0.3s;
  pointer-events: none;
}

input:focus + label {
  /* 定位到 input 上方 */
  color: #f60;
  font-size: 0.8em;
  transform: translateY(-150%);
}
复制代码

已经在 20% 的时间内完成了 80% 的工做量，还有剩下 20% 的问题总结以下

1. 因被 label 遮挡，没法在 label 文字区域点击 input
2. 得到焦点的 CSS Selector 很简单，还有一种复杂的状况是 input 非空值时的 CSS Selector

焦点

pointer-events 用来控制鼠标点击的行为，若是要实现透过 label 点击，能够设置该属性为 none。

label {
  pointer-events: none;
}
复制代码

input:not(:empty)

我条件性反射想到用这个来匹配值非空的 input。但我仔细查了下文档，发现它是不适用的。

根据 empty-pesudo Selectors 描述为

The :empty pseudo-class represents an element that has no children at all. In terms of the document tree, only element nodes and content nodes (such as DOM text nodes, CDATA nodes, and entity references) whose data has a non-zero length must be considered as affecting emptiness;

我来大体翻译一下，若是一个元素, 它的子节点数为 0，那么它将匹配到 :empty。这和 input 的 value 风马牛不相及了。

那如何获取元素 element 子节点的个数呢？ 使用 element.childNodes.length。

参考 stackoverflow :not(:empty) CSS selector is not working?

input:not([value=""])

那么再简单粗暴些，直接匹配属性 value 是不就能够了。

No. 不能够。input 中的显示值并不等同与属性 value。

那这就引出了下一个问题

如何获取 input 的值

用如下代码测试一下

<input type="text" id="input">
复制代码

input.value // ''
input.getAttribute('value') // null

input.setAttribute('value', 4)
input.value // '4'，value 值同步过来了
input.getAttribute('value') // '4'

input.value = 3
input.value // '3'
input.getAttribute('value') // '4'
复制代码

结论：

1. input 经过 input.value 获取值，而非 input.getAttribute('value')
2. 若是 input.value 为空，那么能够经过 input.setAttribute('value', value) 设置值，而且会同时修改 input.value
3. 若是手动为 input.value 赋值后，则使用 input.setAttribute('value', value) 无效

那么匹配值非空的 input，能够更深理解为 匹配input.value为空的input

这说明在纯css实现时没法使用 input:not([value=""]) 做为选择器

使用 js

思路很简单，同步 input.value 到 input.getAttribute('value')

<input onkeyup="this.setAttribute('value', this.value);" />
复制代码

使用 React

受控的 input 组件经过手动控制属性 value，来设置 input 的值。

这时再结合使用 input:not([value=""]) 选择器能够成功控制 input 的过渡效果

而我项目中也是在使用 React，使用这一选择器能够很好的知足个人需求

input:valid

在 html5 中，input 的 type 新增了如下类型

• email
• number
• search
• url
• datetime
• ...

而且添加了检验方式，如是否必须，正则等

• max/min，最大最小值
• pattern，正则
• required，是否必填

这里引入一个新的选择器 input:required，匹配全部拥有合法值的 input

咱们能够对全部 input 添加 required 的标志，此时 input:valid 的含义即匹配有值时的 input，顺利解决问题

可是使用 input:valid 也有一些限制，如如下两点

1. 全部的 input 必须是 required，选填的也必须做为 required，失去了语义化，且提交时会有提示没法正常提交
2. 没法使用 pattern，email 等复杂 input 的校验

校验提示触发时机

在 form 的 submit 事件触发后，会引起浏览器自带的校验提示

而 form 的 submit 事件触发须要知足如下两个条件

1. 包裹在 form 下
2. 点击form下 input[type="submit"] 或者 button 进行提交

对于 input:valid 的两点限制，能够经过把 form 改为 div 解决，此时没法有 submit 事件，选填项也能够正确处理。至于复杂表单校验，则经过js控制

input:not(:placeholder-shown)

见名思意，:placeholder-shown 此选择器匹配是否有 placeholder，既然有 placeholder，那么 input 就没有 value。

它有一个必要条件，placeholder 属性不能为空，若是实在没必要要能够设置为空字符串

<input placeholder=" " />
复制代码

参考

• Detect if an input has text in it using CSS — on a page I am visiting and do not control?

---

关注公众号山月行，在这里记录了个人技术成长，欢迎交流