将占位符文本更改为红色 onclick [重复]答案

【问题标题】：Change placeholder text to red onclick [duplicate]将占位符文本更改为红色 onclick [重复]
【发布时间】：2021-09-10 06:28:30
【问题描述】：

我有这个表单，并且希望在单击我的按钮时占位符文本变为红色。我有 JS 代码，但是当我们点击我的按钮时它似乎没有改变颜色。想法？

<form>
         <input id="red-border-error" class="test-form-1" type="text" name="url" placeholder="yourstorehere.com">
        <input class="test-button-1" type="submit" value="BUTTON"></input>
    </form>

Javascript

    document.getElementById("url-30").addEventListener("submit", (event) => {
            event.preventDefault()
            let errorMessage = document.getElementById("red-border-error").placeholder = "Type your store URL here";
            let myForm = document.getElementById("url");
            let formData = new FormData(myForm);
            if (formData.get("urlName") === "") {
            document.getElementById("red-border-error").style.borderColor = "red";
            document.getElementById("red-border-error").placeholder.style.color = "red";
            return errorMessage;
            }

【问题讨论】：

document.getElementById("red-border-error").placeholder.style 没有意义 - placeholder 不是一个元素，它只是一个属性，它没有自己的 style 对象。
所以占位符当前是灰色的，理想情况下希望占位符选择器在单击按钮时变为红色。我知道如何更改占位符文本
是的，我第一次找到你。
对，所以你的意思是你可以改变伪选择器样式？
没有任何简单的方法，但是您可以例如在输入中添加一个类，然后在样式表中编写一个匹配规则，将颜色应用于占位符。

标签： javascript html css forms

【解决方案1】：

这是你想要的吗？？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles.css" />
    <title>Document</title>
  </head>
  <body>
    <form action="submit">
      <input type="text" placeholder="placeholder" class="input" />
      <button class="btn">click</button>
    </form>

    <script src="./app.js"></script>
  </body>
</html>

.input-active::placeholder {
  color: red;
}

const button = document.querySelector('.btn');
const input = document.querySelector('.input');
const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
  e.preventDefault();
});

button.addEventListener('click', (e) => {
  e.preventDefault();
  input.classList.add('input-active');
});

【讨论】：