個人不可能這麼可愛（APP打開有驚喜）

• 做者：陳大魚頭
• github： KRISACHAN

<input /> 標籤是咱們平常開發中很是常見的替換元素了，可是最近在刷 whattwg 跟 MDN 的時候發現 跟 <input /> 有不少相關的屬性，選擇器都沒怎麼用過，因此就開篇文章來整理一下一些比較有趣或者實用的知識點。

本篇文章默認你們已經知道 <input /> 標籤的基本用法，不會作過多的基礎說明~

沒想到，這些選擇器竟然跟 input ...

到寫文章爲止，根據最新的 drafts 指出，一共有3大類，16種跟 input 相關的選擇。其實都挺有用的，善用它們，會讓咱們的用戶體驗更加美好。

下面咱們來分享一下這3大類選擇器的做用：

第一類：控制系（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	選擇狀態不肯定的表單元素與 <progress>

第三類：偵查系（Input Value-checking）

選擇器	做用
:blank	選擇處於空值時的 <input>，暫未被瀏覽器支持
:valid	選擇驗證經過的表單元素
:invalid	選擇驗證不經過的表單元素
:in-range	選擇處於指定範圍內的 <input />
:out-of-range	選擇不處於指定範圍內的 <input />
:required	選擇必填的表單元素
:optional	選擇選填的表單元素
:user-invalid	選擇用戶輸入但值非法時的 <input />，暫未被瀏覽器支持

可怕，除了選擇器，竟然還跟這些屬性有關係

<input> 除了有不少相關的選擇器，結合不一樣的type還有不一樣的屬性能夠供使用。他們的做用以下：

屬性	做用
maxlength	可輸入的最大長度
minlength	可輸入的最小長度
size	輸入框的長度
readonly	輸入框是否只讀
required	輸入框是否必填
multiple	輸入框是否能夠多選
pattern	輸入框驗證規則
min	可輸入的最小值
max	可輸入的最大值
step	輸入框每次的增量
list	輸入框綁定的可選值數據
placeholder	輸入框預選文字

實戰

經過上面的三類說明，咱們大體瞭解了 <input /> 標籤的相關信息，可是大家覺得我是來列list的嗎？

固然不是，還有實操啊~

純CSS實現表單提交功能

首先咱們來看個效果圖

上面的效果就是一個純CSS實現的表單提交功能，這是怎麼實現的呢？下面咱們直接看源碼，而後一步一步地來分拆（不想看的能夠直接CV下面的源碼本身作測試~）

<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">
    帳號：
    <input data-title="帳號" placeholder="請輸入正確的帳號" pattern="\w{6,10}" name="account" type="text" required />
    <span class="f-tips">請輸入正確的帳號</span>
    <br />
    密碼：
    <input data-title="密碼" placeholder="請輸入正確的密碼" pattern="\w{6,10}" name="password" type="password" required />
    <span class="f-tips">請輸入正確的密碼</span>
    <br />
    <input name="button" type="submit" value="提交" />
</form>
複製代碼

第一步：寫好基礎結構

首先咱們來把基礎結構給寫好，代碼以下：

<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">
    帳號：
    <input data-title="帳號" placeholder="請輸入正確的帳號" pattern="\w{6,10}" name="account" type="text" required />
    <span class="f-tips">請輸入正確的帳號</span>
    <br />
    密碼：
    <input data-title="密碼" placeholder="請輸入正確的密碼" pattern="\w{6,10}" name="password" type="password" required />
    <span class="f-tips">請輸入正確的密碼</span>
    <br />
    <input name="button" type="submit" value="提交" />
</form>
複製代碼

掃一眼，嗯，挺簡單的，都是經常使用的東西。咦，不對，這個 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[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;
}
複製代碼

上面即是核心交互的實現。

首先第一個class就是保證了在兩個輸入框不經過的時候隱藏，就是當輸入框值爲空或者不符合驗證規則，則隱藏提交按鈕。

第二個，第三個class則是控制當用戶在輸入框輸入內容時，若是不符合驗證規則，則顯示錯誤信息，不然則隱藏。

第四個class則是用過 placeholder 是否存在來控制錯誤信息的顯隱，若是 placeholder 不顯示，則證實用戶正在輸入，錯誤信息則根據用戶輸入的值來判斷是否顯隱，不然則隱藏。

狀態切換

上面咱們有提到一個選擇器 :indeterminate ，這個是用於選擇狀態不肯定的表單元素與 <progress> ，玩過掃雷的人都知道，右擊除了能夠選擇紅旗，還能夠選擇問號，就是選中，但不肯定；又跟 promise 的 pending 狀態類型，介於 resolve 與 reject 之間。

多了 :indeterminate 會給咱們帶來不少頗有趣的體驗。

首先咱們來看看它的使用案例。

基礎使用法

先看效果

代碼以下：

<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">點擊左邊</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>
複製代碼

這裏面其實沒有什麼複雜的實現，只是作了箇中間態的判斷，就很是輕鬆的實現了radio的三種狀態切換。

秀到頭皮發麻法

先看效果

（此天秀效果來自於 Ben Szabo 的 codepen，有興趣的能夠仔細研究下，我什麼時候纔能有大佬這麼優秀，嚶嚶嚶~）

輸入框綁定的可選值

先看效果

其實代碼很簡單：

<input type="text" list="names" multiple />
<datalist id="names">
    <option value="kris">
    <option value="陳大魚頭">
    <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>
複製代碼

這裏原理就是經過 <input list="dates" /> 來綁定須要下拉顯示的數據列表 <datalist id="dates"> 。

那麼當咱們要實現輸入聯想的時候，也能夠經過修改 <datalist id="dates"> 的子元素來實現，而不是再寫一大堆的操做函數來實現。

總結

其實 <input /> 標籤還有不少有趣的功能是能夠挖掘的，不一樣的類型，結合不一樣的選擇器與屬性，是能夠有更多讓人爲之驚歎的體驗的。若是你有興趣的話，不妨多開開腦洞，親自動手實現一些有趣的功能，或者有什麼有趣的想法也能夠在下方給魚頭留言或者加魚頭微信 「krisChans95」 來暢談。

彩蛋

經由掘友跟微友們提醒，才發現一個比較有趣的彩蛋，感受我這篇文章應該更名爲《震驚，一篇文章竟然引起出掘金跟微信的。。。》

若是你、喜歡探討技術，或者對本文有任何的意見或建議，你能夠掃描下方二維碼，關注微信公衆號「 魚頭的Web海洋」，隨時與魚頭互動。歡迎！衷心但願能夠碰見你。