深入理解 input 标签

作者： 五香麻辣豆腐皮

做这篇文章主要是做一个知识积累记录，同时对部分内容根据自身的理解进行了调整

下面步入正题

相信<input />标签大家已经非常的熟悉了，也正因非常熟悉，当我看到陈鱼大佬分享的文章标题时，就产生了兴趣，如此常用的标签还有什么更骚包的东西吗？答案是肯定的，看了后才知道 用纯CSS居然可以直接做到表单验证！

那么要实现这一效果需要些什么呢？

1.首先是选择器方面的一些扩展：

第一类：控制系（Input Control States）

选择器	作用
:enabled	选择可使用状态的 <input /> 元素
:disabled	选择不可使用状态的 <input /> 元素
:read-only	选择不可编辑状态的元素（不仅仅是 <input /> ）
:read-write	选择可编辑状态的元素（不仅仅是 <input /> ）
:placeholder-shown	选择 placeholder text 显示时的元素
:default	选择在 <button>，<input type="checkbox" />， <input type="radio" />, 以及 <option> 上的默认状态

第二类：输出系（Input Value States）

选择器	作用
:checked	选择处于选中状态的 <input type="radio" />
:indeterminate	选择状态不确定的表单元素

第三类：侦查系（Input Value-checking）

选择器	作用
:blank	选择处于空值时的 <input />（暂未被浏览器支持）
:valid	选择验证通过的表单元素
:invalid	选择验证不通过的表单元素
:in-range	选择处于指定范围内的 <input />
:out-of-range	选择不处于指定范围内的 <input />
:required	选择必填的表单元素
:optional	选择选填的表单元素
:user-invalid	选择用户输入但值非法时的 <input />（暂未被浏览器支持）

2.其次是其自身的属性：

属性	作用
maxlength	可输入的最大长度
minlength	可输入的最小长度
size	输入框的长度
readonly	输入框是否只读
required	输入框是否必填
multiple	输入框是否可以多选
pattern	输入框验证规则
min	可输入的最小值
max	可输入的最大值
step	输入框每次的增量
list	输入框绑定的可选值数据
placeholder	输入框预选文字

接下来我们就用上面的知识来达到 “纯CSS实现表单验证功能”

1.先对功能进行一下描述：

• 输入框得到焦点时，如果输入的内容验证不通过，则右侧的文本提示显示出来，否则不显示
• 输入框失去焦点时，如果其中的内容验证不通过，则右侧的文本依然处于显示状态，否则不显示
• 在输入的过程中，如果输入的内容验证通过，则右侧的文本不显示，否则显示
• 当账号与密码输入框均验证通过时，登录按钮显示出来 （不过这一功能一般不会这样实现，不符合常理，这里只是为了演示选择器的效果）

2.再看看一下最终效果图

3.接下来是代码部分

其中重要的部分作用已用注释的方式进行描述

<style>
    form > input {
        margin-bottom: 10px;
    }

    form > .error {
        color: #ff4b52;
    }

    /* 实现验证通过时，按钮出现效果，不过一般表单提交不会做这样的功能，这里仅仅只是为了演示选择器 */
    input[type='text']:invalid ~ input[type='submit'],
    input[type='password']:invalid ~ input[type='submit'] {
        display: none;
    }

    /* 输入框required属性为true、已获得焦点并且验证不通过时 渲染验证提示文本 */
    input[required]:focus:invalid + span {
        display: inline;
    }

    /* 输入框required属性为true并且为空时 不渲染验证提示文本 */
    input[required]:empty + span {
        display: none;
    }

    /* 输入框required属性为true、验证不通过、失去焦点并且有文本内容时 渲染验证提示文本*/
    input[required]:invalid:not(:placeholder-shown) + span {
        display: inline;
    }
</style>
<form>
    <span>账号：</span>
    <input type="text" placeholder="请输入账号" pattern="\w{6,10}" required/>
    <span class="error">账号格式有误，请输入6~10位任意字符</span>
    <br/>
    <span>密码：</span>
    <input type="password" placeholder="请输入密码" pattern="\w{6,10}" required/>
    <span class="error">密码格式有误，请输入6~10位任意字符</span>
    <br/>
    <input type="submit" value="登录"/>
</form>

以上代码最主要的其实就是选择器部分，选择器每一步的作用都已用注释进行了解释

接下来我们我们再演示一个平时没有用过的选择器:indeterminate

上面描述它的作用是 “用于选择状态不确定的表单元素” ,这是一个平时没用过的状态，拿多选框来说，我们的认知类它就两个状态：选中和不选中，而这个选择器表示的是，还不知道选没选中；用生活中在淘宝上淘商品举例的话，我们选了一些商品，但是这些商品我还不知道最后买还是不买。
现在我们就用它来演示一下：

1.依旧是先来一个功能说明：

• 多选框初始是 未选择 状态
• 当多选框处于 未选择 状态时，将其设定为 选中 状态
• 当多选框处于 选中 状态时，将其设定为 不定 状态
• 当多选框处于 不定 状态时，将其设定为 未选择 状态

2.接着来一张最终效果图：

3.最后代码贴上：

<style>
    body {
        background: #333;
    }
    label {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        color: #fff;
        padding: 18px 0;
    }
    input {
        margin-right: .5em;
        width: 30px;
        height: 30px;
    }
</style>
<form>
    <label>
        <input type="checkbox" id="choose"/>
        <span for="choose">点击左边</span>
    </label>
</form>
<script>
    document.querySelector('#choose').addEventListener('click', e => {
        if (e.target.readOnly) {
            e.target.checked = e.target.readOnly = false;
        } else if (!e.target.checked) {
            e.target.readOnly = e.target.indeterminate = true;
        }
    });
</script>

这里对上面js代码部分进行分析以及为什么这里要用到readOnly属性，看看它们具体是如何运行的：

1. 首先说一下为什么要用readOnly属性，因为checkbox具有默认的执行逻辑，也就是我们点击后，它会自动的切换checked的值，所以这里我们需要用另一个（局外人，该属性对于多选框没有什么实际作用）来作为中间值，方便我们逻辑的判断。
2. 初始多选框的各个状态是：checked属性为fasle，indeterminate 属性为false，readOnly属性为false，页面中显示是空
3. 当我们点击的多选框的时候，多选框会自动的将checked属性从false变更为true，同时显示上也会打上勾（如果indeterminate为true也会将其自动的变更为false）。这之后，还会触发我们所绑定的click事件，但是进入这里的时候，checked属性已经变更为true了，因此我们所写的if逻辑都不会执行。而此时多选框的各个状态是：checked属性为true，indeterminate 属性为false，readOnly属性为false，页面中显示是勾
4. 我们再次点击多选框的时候，多选框会自动的将checked属性从true变更为false，同时页面上显示为空。之后，触发我们绑定的click事件，此时逻辑会进入我们else if中的逻辑，因此多选框的各个状态是：checked属性为false，indeterminate 属性为true，readOnly属性为true，页面中显示是-，也就是不定
5. 第三次点击多选框，多选框自动的将checked属性从false变更为true、将indeterminate 属性从true变更为false，同时页面上显示为勾。之后，触发我们绑定的click事件，此时逻辑会进入我们if中的逻辑，因此多选框的各个状态是：checked属性为false，indeterminate 属性为false，readOnly属性为false，页面中显示是空，至此，多选框的状态回到初始状态。

以上就是多选框整个切换的逻辑执行过程。
好了，本文章到这里就结束了，谢谢观看。