如何僅使用 CSS 檢測輸入欄位中的文字？

使用 CSS 偵測輸入欄位中的文字

CSS 提供了有限的選項來偵測輸入欄位是否包含文字。 :empty 偽類和 [value=""] 選擇器無法提供令人滿意的結果。

使用 :placeholder-shown 的解決方案

對於具有佔位符的輸入字段屬性，可以使用 :placeholder-shown 偽類。 placeholder 屬性定義輸入為空時顯示的佔位符文字。透過利用此屬性，可以套用以下 CSS 規則：

input:not(:placeholder-shown) {
  border-color: green;
}

input:placeholder-shown {
  border-color: red;
}

當輸入為空時，將顯示佔位符文本，並且輸入的邊框將設定為紅色。當使用者輸入文字時，佔位符文字消失，邊框顏色變為綠色，表示輸入中存在文字。

限制

此解決方案有一些限制：

• 它要求輸入欄位有一個佔位符屬性。
• 佔位符文字不能為空。但是，可以使用單一空格字元來建立不可見的佔位符。

以上是如何僅使用 CSS 檢測輸入欄位中的文字？的詳細內容。更多資訊請關注PHP中文網其他相關文章！