html - 更改文本区域占位符 onclick 的颜色

Question

假设我有一个按钮和一个文本区域。textarea占位符的正常状态是灰色的。单击按钮时，它应该将占位符更改为黑色。我该怎么做？

标签： htmlcss

Answer 1

::placeholder是将控制输入的占位符文本的伪类...您可以在类中设置它，然后切换类或在单击时将类添加到元素中。

let ta = document.getElementById('ta')

function changeTAText(){
  // the following would toggle on each click
  //=> ta.classList.toggle('placeHolderText')
  // The following would add it without the
  // ability to toggle on click
  ta.classList = 'placeHolderText';
}

btn.addEventListener("click", changeTAText)

.placeHolderText::placeholder {
  color: black;
}

<textarea id="ta" placeholder="enter your text here"></textarea>
<button id="btn">Change Color of Placeholder Text</button>