如何根据它是不是是占位符来更改 textarea 文本的颜色？

Posted 2023-03-05

【中文标题】如何根据它是不是是占位符来更改 textarea 文本的颜色？

【英文标题】：How can I change the colour of a textarea's text depending on whether it is the placeholder or not?如何根据它是否是占位符来更改 textarea 文本的颜色？

【发布时间】：2012-08-20 17:34:28

【问题描述】：

我基本上想使用 javascript 重新创建 html5“占位符”属性，以便它与旧浏览器兼容。

我正在使用 OnFocus 和 OnBlur 的组合，这很简单，我用下面的代码做到了；

<textarea onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">Placeholder text</textarea>

占位符文本将变为浅灰色 (#CCC)，然后当 textarea 聚焦时，它将变为深灰色 (#333)。这在 CSS 中没有问题，但是，如果 textarea 的内容与原始占位符不同，我希望颜色在未聚焦时保持深灰色。

如果我的解释很差，那么这里有一个（非常轻微）更好的解释；

页面加载 ---> textarea placeholder = #CCC ---> 用户关注 textarea ---> textarea 内容变为 #333 ---> 用户释放焦点 ---> 内容应该变回 #CCC 除非它被改变，在这种情况下它应该保持#333

粗体部分是我需要帮助的地方！

谢谢！ :D

编辑：占位符在焦点上消失的事实不是问题，也不需要“修复”

【问题讨论】：

只是为了澄清一下，如果文本与“占位符文本”不同，那么当文本区域失去焦点时，颜色应该保持为#333。如果文本是“占位符文本”或留空，则颜色应恢复为#CCC。

【参考方案1】：

http://jsfiddle.net/DszSR/

​textarea 
  color: #ccc;
​

<textarea
  onfocus="if(this.value==this.defaultValue) this.value=''; this.style.color = '#333';"
  onblur="if(this.value=='') this.value=this.defaultValue; this.style.color = '#ccc';">Placeholder text</textarea>​

【参考方案2】：

您仍然必须在使用 CSS 或 JS 加载页面时将文本颜色设置为 #CCC（如果它获得焦点，我的代码会覆盖该设置，并仅在需要时将其恢复为模糊）

<textarea onfocus="if(this.value==this.defaultValue)this.value='';this.style.color='#333'" onblur="if(this.value=='') this.value=this.defaultValue;this.style.color='#CCC'">Placeholder text</textarea>​

【讨论】：

嘿，首先非常感谢，但它似乎不起作用，你能举一个事件监听器的例子吗？这会覆盖外部 CSS 样式吗？

是的，它会覆盖一些东西。将在 JsFiddle 上进行测试，随时通知您。 @MichaelRuta