3

我基本上想使用 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

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

4

2 回答 2

3

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>​
于 2012-08-25T11:28:27.707 回答
0

您仍然必须在使用 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>​
于 2012-08-25T11:24:33.403 回答