如何更改文本区域的颜色's文本，具体取决于它是否为占位符

How can I change the colour of a textarea's text depending on whether it is the placeholder or not?

本文关键字：文本 取决于 是否 占位符 区域 何更改 颜色      更新时间：2023-09-26

我基本上想使用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），然后当文本区域聚焦时，它将变为深灰色（#333）。这在CSS中没有问题，但是，如果文本区域的内容与原始占位符不同，我希望在不聚焦时颜色保持为深灰色。

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

页面加载--->textarea占位符=#CCC---->用户关注textarea---->textarea内容变为#333---->用户释放焦点--->除非内容已更改，否则内容应改回#CCC，在这种情况下应保持#333-

大胆的一点是我需要帮助的！

谢谢！：D

编辑：占位符在焦点上消失不是问题，不需要"修复"

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>​

在使用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>​
相关文章：