![c0794781b6ea3d3edbc239628c75cb90.png](https://i-blog.csdnimg.cn/blog_migrate/a0c4353149494128bd28f39041e65462.png)
- 作者:陈大鱼头
- github: KRISACHAN
<input /> 标签是我们日常开发中非常常见的替换元素了,但是最近在刷 whattwg 跟 MDN 的时候发现 跟 <input /> 有很多相关的属性,选择器都没怎么用过,所以就开篇文章来整理一下一些比较有趣或者实用的知识点。
本篇文章默认大家已经知道 <input /> 标签的基本用法,不会做过多的基础说明~
![9a897a7ce0782279bce973aa49199ef8.png](https://i-blog.csdnimg.cn/blog_migrate/691bba359d750ee4fa5c4c1101659d8a.jpeg)
没想到,这些选择器居然跟 input ...
到写文章为止,根据最新的 drafts 指出,一共有 3大类,16种跟 input 相关的选择。其实都挺有用的,善用它们,会让我们的用户体验更加美好。
下面我们来分享一下这3大类选择器的作用:
![b1ed032a966965f460def7e99b1f39fb.png](https://i-blog.csdnimg.cn/blog_migrate/233f712fc64f800a2c89daf316b4146d.jpeg)
第一类:控制系(Input Control States)
![033835f4a54f91ed2ec468a5421be594.png](https://i-blog.csdnimg.cn/blog_migrate/1dc6ef0652255f1ef3441eea73d1e966.jpeg)
第二类:输出系(Input Value States)
![c909772b486bb8dc06a8d55bdf7a5bd4.png](https://i-blog.csdnimg.cn/blog_migrate/bac2cc23ea85392b058a79d2c01bf597.png)
第三类:侦查系(Input Value-checking)
![10109e63207ffbd465b4498c488a3ffe.png](https://i-blog.csdnimg.cn/blog_migrate/97cee34654a7f34b2dabea6ce057b656.jpeg)
可怕,除了选择器,居然还跟这些属性有关系
<input> 除了有很多相关的选择器,结合不同的type还有不同的属性可以供使用。他们的作用如下:
![80af6921b2fa651e3dc67edfe552209b.png](https://i-blog.csdnimg.cn/blog_migrate/626117bc6d05cc1096b50d031950aca5.png)
实战
通过上面的三类说明,我们大致了解了 <input /> 标签的相关信息,但是你们以为我是来列list的吗?
当然不是,还有实操啊~
![f7a2414021942a1282c0093a483762fb.png](https://i-blog.csdnimg.cn/blog_migrate/38e51b8b01ad0f8964c30761e6b4ab32.jpeg)
纯CSS实现表单提交功能
首先我们来看个效果图
![710548ad470f0e4b267cafc5574c44fc.png](https://i-blog.csdnimg.cn/blog_migrate/8d66563232d44ab903dce174c27abb52.jpeg)
上面的效果就是一个纯CSS实现的表单提交功能,这是怎么实现的呢?下面我们直接看源码,然后一步一步地来分拆(不想看的可以直接CV下面的源码自己做测试~)
<
第一步:写好基础结构
首先我们来把基础结构给写好,代码如下:
<
扫一眼,嗯,挺简单的,都是常用的东西。咦,不对,这个 pattern 是什么东西?
在这里我们重点分享下 pattern 这个属性,这是一个用来验证 input[value] 是否合法的属性,里面的内容就是匹配value的,语法便是正则的语法,例子如下:
<label>
<!--
当前pattern的内容就是验证input[name="part"]的value的,其规则如同里面的正则一样,匹配input[name="part"]的value是否是一个数字+3个大写字母
-->
<input pattern="[0-9][A-Z]{3}" name="part" />
</label>
当然,不同的 input[type] 也会默认带有相应的 pattern ,例如 input[type="email"] 就是默认匹配了以下规则:
/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
第二步:重点功能
input
上面便是核心交互的实现。
首先第一个class就是保证了在两个输入框不通过的时候隐藏,就是当输入框值为空或者不符合验证规则,则隐藏提交按钮。
第二个,第三个class则是控制当用户在输入框输入内容时,如果不符合验证规则,则显示错误信息,否则则隐藏。
第四个class则是用过 placeholder 是否存在来控制错误信息的显隐,如果 placeholder 不显示,则证明用户正在输入,错误信息则根据用户输入的值来判断是否显隐,否则则隐藏。
状态切换
上面我们有提到一个选择器 :indeterminate ,这个是用于选择状态不确定的表单元素与 <progress> ,玩过扫雷的人都知道,右击除了可以选择红旗,还可以选择问号,就是选中,但不确定;又跟 promise 的 pending 状态类型,介于 resolve 与 reject 之间。
多了 :indeterminate 会给我们带来很多很有趣的体验。
首先我们来看看它的使用案例。
基础使用法
先看效果
![eab90dd88584efbf6f51adea5a5f7d8e.png](https://i-blog.csdnimg.cn/blog_migrate/63a381de73282ed1bde9879c1038e4c0.jpeg)
代码如下:
<
这里面其实没有什么复杂的实现,只是做了个中间态的判断,就非常轻松的实现了radio的三种状态切换。
秀到头皮发麻法
先看效果
![e171d2d3359ac7ec673792fa344aa056.png](https://i-blog.csdnimg.cn/blog_migrate/3c26ed1882f3a17b5001d01d21725742.jpeg)
(此天秀效果来自于 Ben Szabo 的 codepen,有兴趣的可以仔细研究下,我何时才能有大佬这么优秀,嘤嘤嘤~)
输入框绑定的可选值
先看效果
![0248ceec11f4de18964c72fe45ba04ab.png](https://i-blog.csdnimg.cn/blog_migrate/3bbea6e99963fa2ac9ec51e05f8240b0.jpeg)
其实代码很简单:
<
这里原理就是通过 <input list="dates" /> 来绑定需要下拉显示的数据列表 <datalist id="dates"> 。
那么当我们要实现输入联想的时候,也可以通过修改 <datalist id="dates"> 的子元素来实现,而不是再写一大堆的操作函数来实现。
总结
其实 标签还有很多有趣的功能是可以挖掘的,不同的类型,结合不同的选择器与属性,是可以有更多让人为之惊叹的体验的。如果你有兴趣的话,不妨多开开脑洞,亲自动手实现一些有趣的功能。
如果你喜欢探讨技术,或者对本文有任何的意见或建议,非常欢迎加鱼头微信好友一起探讨,当然,鱼头也非常希望能跟你一起聊生活,聊爱好,谈天说地。 鱼头的微信号是:krisChans95 也可以扫码添加好友,备注“知乎”就行
![744a2659611da0bab64d26278bd486ea.png](https://i-blog.csdnimg.cn/blog_migrate/62fd41e8f4d5e1b7a8b0005cc8067a66.jpeg)