作者：陳大魚(yú)頭

github： KRISACHAN

<input /> 標(biāo)簽是我們?nèi)粘ｉ_(kāi)發(fā)中非常常見(jiàn)的替換元素了，但是最近在刷 whattwg 跟 MDN 的時(shí)候發(fā)現(xiàn) 跟 <input /> 有很多相關(guān)的屬性，選擇器都沒(méi)怎么用過(guò)，所以就開(kāi)篇文章來(lái)整理一下一些比較有趣或者實(shí)用的知識(shí)點(diǎn)。



本篇文章默認(rèn)大家已經(jīng)知道 <input /> 標(biāo)簽的基本用法，不會(huì)做過(guò)多的基礎(chǔ)說(shuō)明~







沒(méi)想到，這些選擇器居然跟 input …

到寫(xiě)文章為止，根據(jù)的 drafts 指出，一共有3大類(lèi)，16種跟 input 相關(guān)的選擇。其實(shí)都挺有用的，善用它們，會(huì)讓我們的用戶體驗(yàn)更加美好。



下面我們來(lái)分享一下這3大類(lèi)選擇器的作用：







第一類(lèi)：控制系（Input Control States）

選擇器 作用

:enabled 選擇可使用狀態(tài)的 <input /> 元素

:disabled 選擇不可使用狀態(tài)的 <input /> 元素

:read-only 選擇不可編輯狀態(tài)的元素（不僅僅是 <input /> ）

:read-write 選擇可編輯狀態(tài)的元素（不僅僅是 <input /> ）

:placeholder-shown 選擇 placeholder text 顯示時(shí)的元素

:default 選擇在 <button>，<input type="checkbox" />， <input type="radio" />, 以及 <option> 上的默認(rèn)狀態(tài)

第二類(lèi)：輸出系（Input Value States）

選擇器 作用

:checked 選擇處于選中狀態(tài)的 <input type="radio" />

:indeterminate 選擇狀態(tài)不確定的表單元素與 <progress>

第三類(lèi)：偵查系（Input Value-checking）

選擇器 作用

:blank 選擇處于空值時(shí)的 <input>，暫未被瀏覽器支持

:valid 選擇驗(yàn)證通過(guò)的表單元素

:invalid 選擇驗(yàn)證不通過(guò)的表單元素

:in-range 選擇處于指定范圍內(nèi)的 <input />

:out-of-range 選擇不處于指定范圍內(nèi)的 <input />

:required 選擇必填的表單元素

:optional 選擇選填的表單元素

:user-invalid 選擇用戶輸入但值非法時(shí)的 <input />，暫未被瀏覽器支持

可怕，除了選擇器，居然還跟這些屬性有關(guān)系

<input> 除了有很多相關(guān)的選擇器，結(jié)合不同的type還有不同的屬性可以供使用。他們的作用如下：



屬性 作用

maxlength 可輸入的最大長(zhǎng)度

minlength 可輸入的最小長(zhǎng)度

size 輸入框的長(zhǎng)度

readonly 輸入框是否只讀

required 輸入框是否必填

multiple 輸入框是否可以多選

pattern 輸入框驗(yàn)證規(guī)則

min 可輸入的最小值

max 可輸入的最大值

step 輸入框每次的增量

list 輸入框綁定的可選值數(shù)據(jù)

placeholder 輸入框預(yù)選文字

實(shí)戰(zhàn)

通過(guò)上面的三類(lèi)說(shuō)明，我們大致了解了 <input /> 標(biāo)簽的相關(guān)信息，但是你們以為我是來(lái)列l(wèi)ist的嗎？



當(dāng)然不是，還有實(shí)操啊~







純CSS實(shí)現(xiàn)表單提交功能

首先我們來(lái)看個(gè)效果圖







上面的效果就是一個(gè)純CSS實(shí)現(xiàn)的表單提交功能，這是怎么實(shí)現(xiàn)的呢？下面我們直接看源碼，然后一步一步地來(lái)分拆（不想看的可以直接CV下面的源碼自己做測(cè)試~）



<style>

    :root {

      --error-color: red;

    }

    .form > input {

      margin-bottom: 10px;

    }

    .form > .f-tips {

      color: var(--error-color);

      display: none;

    }

    input[type="text"]:invalid ~ input[type="submit"],

    input[type="password"]:invalid ~ input[type="submit"] {

      display: none;

    }

    input[required]:focus:invalid + span {

      display: inline;

    }

    input[required]:empty + span {

      display: none;

    }

    input[required]:invalid:not(:placeholder-shown) + span {

      display: inline;

    }

</style>

<form class="form" id="form" method="get" action="/api/form">

    賬號(hào)：

    <input data-title="賬號(hào)" placeholder="請(qǐng)輸入正確的賬號(hào)" pattern="\w{6,10}" name="account" type="text" required />

    <span class="f-tips">請(qǐng)輸入正確的賬號(hào)</span>

    <br />

    密碼：

    <input data-title="密碼" placeholder="請(qǐng)輸入正確的密碼" pattern="\w{6,10}" name="password" type="password" required />

    <span class="f-tips">請(qǐng)輸入正確的密碼</span>

    <br />

    <input name="button" type="submit" value="提交" />

</form>



第一步：寫(xiě)好基礎(chǔ)結(jié)構(gòu)

首先我們來(lái)把基礎(chǔ)結(jié)構(gòu)給寫(xiě)好，代碼如下：



<style>

    :root {

      --error-color: red;

    }

    .form > input {

      margin-bottom: 10px;

    }

    .form > .f-tips {

      color: var(--error-color);

      display: none;

    }

</style>

<form class="form" id="form" method="get" action="/api/form">

    賬號(hào)：

    <input data-title="賬號(hào)" placeholder="請(qǐng)輸入正確的賬號(hào)" pattern="\w{6,10}" name="account" type="text" required />

    <span class="f-tips">請(qǐng)輸入正確的賬號(hào)</span>

    <br />

    密碼：

    <input data-title="密碼" placeholder="請(qǐng)輸入正確的密碼" pattern="\w{6,10}" name="password" type="password" required />

    <span class="f-tips">請(qǐng)輸入正確的密碼</span>

    <br />

    <input name="button" type="submit" value="提交" />

</form>



掃一眼，嗯，挺簡(jiǎn)單的，都是常用的東西。咦，不對(duì)，這個(gè) pattern 是什么東西？



在這里我們重點(diǎn)分享下 pattern 這個(gè)屬性，這是一個(gè)用來(lái)驗(yàn)證 input[value] 是否合法的屬性，里面的內(nèi)容就是匹配value的，語(yǔ)法便是正則的語(yǔ)法，例子如下：



<label>

    <!--

當(dāng)前pattern的內(nèi)容就是驗(yàn)證input[name="part"]的value的，其規(guī)則如同里面的正則一樣，匹配input[name="part"]的value是否是一個(gè)數(shù)字+3個(gè)大寫(xiě)字母

-->

    <input pattern="[0-9][A-Z]{3}" name="part" />

</label>



當(dāng)然，不同的 input[type] 也會(huì)默認(rèn)帶有相應(yīng)的 pattern ，例如 input[type="email"] 就是默認(rèn)匹配了以下規(guī)則：



/^[a-zA-Z0-9.!#$%&'+\/=?^_`{|}~-]+@a-zA-Z0-9?(?:.a-zA-Z0-9?)$/

1

第二步：重點(diǎn)功能

input[type="text"]:invalid ~ input[type="submit"],

input[type="password"]:invalid ~ input[type="submit"] {

    display: none;

}

input[required]:focus:invalid + span {

    display: inline;

}

input[required]:empty + span {

    display: none;

}

input[required]:invalid:not(:placeholder-shown) + span {

    display: inline;

}



上面便是核心交互的實(shí)現(xiàn)。



首先第一個(gè)class就是保證了在兩個(gè)輸入框不通過(guò)的時(shí)候隱藏，就是當(dāng)輸入框值為空或者不符合驗(yàn)證規(guī)則，則隱藏提交按鈕。



第二個(gè)，第三個(gè)class則是控制當(dāng)用戶在輸入框輸入內(nèi)容時(shí)，如果不符合驗(yàn)證規(guī)則，則顯示錯(cuò)誤信息，否則則隱藏。



第四個(gè)class則是用過(guò) placeholder 是否存在來(lái)控制錯(cuò)誤信息的顯隱，如果 placeholder 不顯示，則證明用戶正在輸入，錯(cuò)誤信息則根據(jù)用戶輸入的值來(lái)判斷是否顯隱，否則則隱藏。



狀態(tài)切換

上面我們有提到一個(gè)選擇器 :indeterminate ，這個(gè)是用于選擇狀態(tài)不確定的表單元素與 <progress> ，玩過(guò)掃雷的人都知道，右擊除了可以選擇紅旗，還可以選擇問(wèn)號(hào)，就是選中，但不確定；又跟 promise 的 pending 狀態(tài)類(lèi)型，介于 resolve 與 reject 之間。



多了 :indeterminate 會(huì)給我們帶來(lái)很多很有趣的體驗(yàn)。



首先我們來(lái)看看它的使用案例。



基礎(chǔ)使用法

先看效果







代碼如下：



<style>

    body {

        background: #333;

        color: #fff;

        padding: 20px;

        text-align: center;

    }

    input {

        margin-right: .25em;

        width: 30px;

        height: 30px;

    }

    label {

        position: relative;

        top: 1px;

        font-size: 30px;

    }

</style>

<form>

    <input type="checkbox" id="checkbox">

    <label for="option">點(diǎn)擊左邊</label>

</form>

<script>

      'use strict';

      checkbox.addEventListener('click', ev => {

        if (ev.target.readOnly) {

          ev.target.checked = ev.target.readOnly = false;

        } else if (!ev.target.checked) {

          ev.target.readOnly = ev.target.indeterminate = true;

        };

      });

</script>



這里面其實(shí)沒(méi)有什么復(fù)雜的實(shí)現(xiàn)，只是做了個(gè)中間態(tài)的判斷，就非常輕松的實(shí)現(xiàn)了radio的三種狀態(tài)切換。



秀到頭皮發(fā)麻法

先看效果







（此天秀效果來(lái)自于 Ben Szabo 的 codepen，有興趣的可以仔細(xì)研究下，我何時(shí)才能有大佬這么優(yōu)秀，嚶嚶嚶~）



輸入框綁定的可選值

先看效果







其實(shí)代碼很簡(jiǎn)單：



<input type="text" list="names" multiple />

<datalist id="names">

    <option value="kris">

    <option value="陳大魚(yú)頭">

    <option value="深圳金城武">

</datalist>



<input type="email" list="emails" multiple />

<datalist id="emails">

    <option value="chenjinwen77@foxmail.com" label="kris">

    <option value="chenjinwen77@gmail.com" label="kris">

</datalist>



<input type="date" list="dates" />

<datalist id="dates">

    <option value="2019-09-03">

</datalist>



這里原理就是通過(guò) <input list="dates" /> 來(lái)綁定需要下拉顯示的數(shù)據(jù)列表 <datalist id="dates"> 。



那么當(dāng)我們要實(shí)現(xiàn)輸入聯(lián)想的時(shí)候，也可以通過(guò)修改 <datalist id="dates"> 的子元素來(lái)實(shí)現(xiàn)，而不是再寫(xiě)一大堆的操作函數(shù)來(lái)實(shí)現(xiàn)。



總結(jié)