CSS 如何偵測外部網站輸入欄位中是否存在文字？

在不可控頁面中使用CSS 偵測輸入文字存在

偵測輸入欄位中的文字存在是一項常見任務，但傳統方法如:empty和[value=""] 可能無法在所有場景下有效運作。對於 JavaScript 無法存取的情況，可以利用 CSS 樣式來實現此目標。

使用 :placeholder-shown 偽類

如果輸入元素包含佔位符屬性， :placeholder-shown 偽類開始發揮作用。此偽類別針對佔位符文字可見的輸入字段，表示該字段為空。

實作：

input:not(:placeholder-shown) {
  /* CSS styles applied when input has text */
}

input:placeholder-shown {
  /* CSS styles applied when input is empty */
}

範例用法：

<input placeholder="Text is required">

<input placeholder=" " value="This one is valid">

<input placeholder=" ">

透過此方法，前兩個輸入將接收應用於:not(:placeholder-shown) 因為它們包含文字或具有非空佔位符值。第三個輸入有佔位符但沒有文本，將接收應用於 :placeholder-shown 的樣式。

當使用瀏覽器擴充功能（如）處理套用於第三方頁面的主題和樣式時，此方法特別有用時尚，因為它允許根據輸入欄位中是否存在文字進行自訂，而不需要JavaScript 。

以上是CSS 如何偵測外部網站輸入欄位中是否存在文字？的詳細內容。更多資訊請關注PHP中文網其他相關文章！