input:focus詳解

在前端開發過程中，input標籤被經常使用。而在一些用戶交互設計中，input標籤的focus狀態也顯得尤為重要。下面將從多個方面詳細闡述input:focus。

一、input:focus的定義

input:focus是 CSS 偽類，表示當元素獲得焦點時觸發。當用戶點擊或通過 Tab 鍵聚焦到元素時，此偽類便自動生效，為元素的樣式提供了特定的控制方式。

二、input:focus的應用

通過input:focus，我們可以使用CSS為input元素實現當元素獲取到焦點時的各種效果，比如：邊框顏色的變化、陰影的變化、顏色變化等等。

border-color的變化

input:focus{
  border-color: red;
}

以上代碼可以實現當input元素獲取到焦點時，邊框顏色變為紅色。

box-shadow的變化

input:focus{
  box-shadow: 0 0 2px 2px #FF0000;
}

以上代碼可以實現當input元素獲取到焦點時，陰影變為紅色。

背景顏色的變化

input:focus{
  background-color: #f5f5f5;
}

以上代碼可以實現當input元素獲取到焦點時，背景顏色變為淺灰色。

三、自定義input:focus的樣式

通過自定義屬性，我們可以實現更多樣式的變化。

input:focus::placeholder{
	color: #666;
}

input:focus:-ms-input-placeholder{
	color: #666;
}

input:focus::-ms-input-placeholder{
	color: #666;
}

以上代碼可以實現當input元素獲取到焦點時，placeholder的文字顏色變為灰色。

四、input:focus在表單驗證中的應用

在表單驗證中，input:focus也是一個重要的應用。通過:focus，可以標明用戶已選中該元素，從而提示用戶在進行下一步操作之前先填寫該表單項的值。如果用戶忘記了某個必填項，提交表單前程序會自動檢查沒有填寫的項並彈出提示。

同時，我們也可以使用:focus的偽類來提示用戶錯誤填寫信息的輸入框。

input:focus:invalid {
  border: 2px solid red;
}

以上代碼可以實現當input元素獲取到焦點時，如果填寫的信息不合法，邊框變為紅色。

五、input:focus的兼容問題

在老版本的瀏覽器中，可能無法識別input:focus，我們需要針對這些瀏覽器來進行代碼調整。

input:focus{
  border: 1px solid #FF0000;/* IE6/7/8不支持box-shadow */
}

input:focus::-moz-placeholder {
  color: #666;/* 火狐瀏覽器*/
}

input:focus:-ms-input-placeholder {
  color: #666;/* IE10 */
}

input:focus::-webkit-input-placeholder {
  color: #666;/* Chrome和Safari瀏覽器 */
}

通過以上的代碼，我們可以實現在低版本的瀏覽器中也可以支持input:focus。

六、input:focus在移動端的使用

在移動端的開發中，用戶通常通過手指點擊或鍵盤的彈起來聚焦到input元素。因此，在移動端的開發中，input:focus也是非常重要的。

以下代碼可以實現在移動端點擊input元素時，讓鍵盤自動彈起來。

七、總結

input:focus可以為我們在前端開發中提供更多的樣式控制方式，並可以實現表單的驗證等功能。同時，在移動端的開發中，也需要注意input:focus的使用，讓用戶體驗更加優良。