内容简介:以前一段时间,基于对最近我需要在我的实验田使用实现效果见诗词弦歌 - 登录
以前一段时间,基于对 next
与 graphql
的调研,再加上本人的兴趣,我做了一个站点,也作为我以后各种技术折腾,实践以及兴趣交汇的试验田。
最近我需要在我的实验田使用 jwt
实践校验码的功能。校验码,就是指注册时邮箱或者短信的校验码。需要校验码则需要有登录注册,而在登录注册时,为了多写一些 CSS,我决定实现一个 Material Design 的表单过渡效果。
实现效果见诗词弦歌 - 登录
问题概述
至于 Material Design 是什么样的效果,如上所示。实现以上效果,可以简单把问题归结为以下两点的实现
- 当 input 中没有值且没有获得焦点时,hint 信息灰色呈现在 input 框内
- 当 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% 的问题总结如下
input
焦点
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' 复制代码
结论:
-
input 通过
input.value
获取值,而非input.getAttribute('value')
-
如果
input.value
为空,那么可以通过input.setAttribute('value', value)
设置值,并且会同时修改input.value
-
如果手动为
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 新增了以下类型
- number
- search
- url
- datetime
- ...
并且添加了检验方式,如是否必须,正则等
- max/min,最大最小值
- pattern,正则
- required,是否必填
这里引入一个新的选择器 input:required
,匹配所有拥有合法值的 input
我们可以对所有 input
添加 required
的标志,此时 input:valid
的含义即匹配有值时的 input
,顺利解决问题
但是使用 input:valid
也有一些限制,如以下两点
-
所有的 input 必须是
required
,选填的也必须作为required
,失去了语义化,且提交时会有提示无法正常提交 - 无法使用 pattern,email 等复杂 input 的校验
校验提示触发时机
在 form
的 submit
事件触发后,会引发浏览器自带的校验提示
而 form
的 submit
事件触发需要满足以下两个条件
- 包裹在 form 下
-
点击form下
input[type="submit"]
或者button
进行提交
对于 input:valid
的两点限制,可以通过把 form
改成 div
解决,此时无法有 submit
事件,选填项也可以正确处理。至于复杂表单校验,则通过js控制
input:not(:placeholder-shown)
见名思意, :placeholder-shown
此选择器匹配是否有 placeholder
,既然有 placeholder
,那么 input
就没有 value
。
它有一个必要条件, placeholder
属性不能为空,如果实在不必要可以设置为空字符串
<input placeholder=" " /> 复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
RESTful Web Services Cookbook
Subbu Allamaraju / Yahoo Press / 2010-3-11 / USD 39.99
While the REST design philosophy has captured the imagination of web and enterprise developers alike, using this approach to develop real web services is no picnic. This cookbook includes more than 10......一起来看看 《RESTful Web Services Cookbook》 这本书的介绍吧!
图片转BASE64编码
在线图片转Base64编码工具
HEX CMYK 转换工具
HEX CMYK 互转工具