如果提交了某個值，如何更改輸入類型 =“文本”中占位符文本的顏色？

Question

我有一個酒吧，用戶可以在其中輸入地址。 如果給出的地址無效，則輸入的 texed 將被刪除，占位符文本將更改為“找不到地址”。 我也希望占位符文本變成紅色，但我不知道怎么做。

這是索引中的代碼

<input type="text" id="searchAdress" placeholder="Type an adress, city or country" />

這是js中的代碼

if (data.length > 0){
            document.getElementById("searchAdress").value='';
            document.getElementById("searchAdress").placeholder = "Type an adress, city or country";
        } else {
            document.getElementById("searchAdress").value='';
            document.getElementById("searchAdress").placeholder = "Adress not found";
        }

Answer 1

通常在 CSS 中，您將使用::placeholder選擇器來修改占位符顏色。 在 JavaScript 中，您不能真正修改 CSS 偽選擇器，因此您必須將特定的 class 分配給每個占位符顏色，如下所示：

 var input = document.getElementById("searchAdress"); function validate(){ var value = input.value; if(value.length>0){ //Valid input.value=""; input.placeholder="Got it"; clearOtherClasses(input); input.classList.add("green"); }else{ //Invalid input.value=""; input.placeholder="Nope"; clearOtherClasses(input); input.classList.add("red"); } } function clearOtherClasses(element){ element.className=""; }

 .green::placeholder{ color:green; }.red::placeholder{ color:red; }

 <input type="text" id="searchAdress" placeholder="Type an adress, city or country"><button onclick="validate()">validate</button> <hr> Enter nothing to toggle red placeholder text. Enter something to toggle green.

function clearOtherClasses()用於防止顏色類沖突（例如，輸入同時具有green class 和red類）。