有沒有辦法只通過css來確定input標簽是否有輸入？
我有這個想法是因為我想完成一個自動補全的input部件，最基本的功能是：
- 如果input沒有內容，這隱藏下拉框
- 反之，顯示下拉框
我找到了一個也許不是很完美的實現方案，描述中可能會有一些細微的區別，不過我還是很希望能做這個簡單的分享
首先，我們構造一個簡單的form表單，僅僅只有一個input
<form>
<label for="input">輸入框</label>
<input type="text" id="input"/>
</form>
當輸入一些值，我設置input的邊框顏色為綠的，下面是一個例子:
判斷input是否為空
我通過html表單驗證去判斷是否為空，所以，這里我使用了required屬性
<form>
<label> Input </label>
<input type="text" name="input" id="input" required />
</form>
// valid：當input輸入值也合法值時采用的樣式
#input:valid{
border-color: green;
}
這時，當有輸入的時候，input表現的很好，邊框顏色也有了相應的變化：
但是，這里有個問題，如果用戶輸入的是空格，那么邊框顏色也會發生改變。
原理上看，這種表現是正常的，因為輸入框確實有了內容。
但是，實際上，我不想讓空格來觸發自動補全彈窗
所以這還不能滿足我們的需求，我要做更細致的檢查
進一步完善
html提供我們利用正則去驗證輸入框內容的屬性:pattern，這里也嘗試使用該屬性來完善
因為想把空格視為非法輸入，我使用\S+，這個很簡單，匹配一個或者多個任何非空白字符
<form>
<label> Input </label>
<input type="text" name="input" id="input" required pattern="\S+"/>
</form>
使用這種方式，的確奏效了，如果用戶輸入空格，輸入框沒有任何變化
但了個是，但是這個正則還是有問題，因為只允許輸入非空白字符，所以你在任何位置輸入空白都會導致輸入框校驗失敗
這里可以使用其他的正則來匹配，比如\^\S+?.+
<form>
<label> Input </label>
<input type="text" name="input" id="input" required pattern="\S+.*"/>
</form>
現在輸入框可以和空格混合輸入了！
但是如果當前校驗失敗，輸入框沒有任何提示，這很不友好！
但我寫這篇文章的時候，有一個問題我不斷思考，能不能只用css給非法驗證也加一種樣式？
輸入無效
這里不能使用:invalid，因為有required字段，即使我們什么也不做，輸入框也會有非正確狀態的樣式提示，這很奇怪。
查看了相關資源，我們可以使用:placeholder-shown來達到我們的目的
大概思路是：
- 增加placeholder
- 如果輸入框如果用戶輸入了內容，但還不合法做一個處理
- 最后利用css的覆蓋特性，添加一個當驗證成功的樣式處理
最終的css大概是這樣
/* 當填充的時候展示紅色，所以這里默認是校驗失敗 */
input:not(:placeholder-shown) {
border-color: hsl(0, 76%, 50%);
}
/* 當驗證成功的時候，采用這個樣式 */
input:valid {
border-color: hsl(120, 76%, 50%);
}
這里有一個小小的demo
總結
上面的內容就是如何只用css來提供一個基礎表單驗證功能，說是只用css，其實也利用的pattern能接受正則表達式，哈哈，所以最根本的是如何寫出最優的正則表達式。