淡入和/或淡出占位符文本答案

【问题标题】：Fade In and / or Out Placeholder Text淡入和/或淡出占位符文本
【发布时间】：2013-07-11 15:14:27
【问题描述】：

有没有办法淡入和淡出输入的占位符文本？

我试过了：

$('.userBox::-webkit-input-placeholder').animate({color: '#888888'}, 500);

但这只是崩溃......

【问题讨论】：

标签： jquery fade placeholder

【解决方案1】：

尝试使用

$('.userBox::-webkit-input-placeholder').fadeOut(500);

或者，您也可以使用this 插件。

【讨论】：

不幸的是，这会淡出整个文本框
@Isaac 插件不会在支持原生占位符属性的浏览器上执行任何操作
@roasted 但是对于旧版浏览器，它会显示占位符
@Isaac 无论如何我认为这不会帮助 OP 找到他想要的东西

【解决方案2】：

如果您指的是浏览器实现提供的占位符文本，我不相信。如果您想使用focus、blur 和key* 事件来实现自定义占位符，那么可以。

【讨论】：

【解决方案3】：

如果你想在焦点上淡出，在模糊时淡入（当输入框为空时），以下应该在 webkit 中工作：

HTML：

<input id="user_email" name="user[email]" placeholder="user@example.org" type="email" />

CSS：

input[type="email"]::-webkit-input-placeholder  {
  -webkit-transition: opacity 0.3s linear; 
  color: gray;
}

input[type="email"]:focus::-webkit-input-placeholder  {
  opacity: 0;
}

jsFiddle：http://jsfiddle.net/a9UA3/

【讨论】：