Question

我基本上想要使用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的内容与原始占位符不同，我希望颜色在未聚焦时保持深灰色。

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

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

粗体位是我需要帮助的！

谢谢！：d

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

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

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

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

2 个答案: