Javascript 使html文本字段内的占位符文本闪烁

在问这个问题之前，我搜索了很多这个功能，但是没有找到任何线索，所以这就是为什么我要发布一个新问题

实际上，我在html文本字段中有一个占位符文本，如下所示

<input type="text" class="timepicker" placeholder="Placeholder Text..." >

---

所以我想让这个占位符闪烁。因此，在html中，或者通过使用jquery或javascript，这是可能的。

您可以通过简单的CSS动画来实现这一点。不过，不确定它的跨浏览器兼容性有多强。适用于Chrome和Firefox

HTML:

---

Fiddle:

这里有一个jQuery唯一的方法来实现这一点：

功能闪烁器（）{
if（$（'input[type=text]'）.attr（'placeholder'））{
//获取占位符文本
$（'input[type=text]'）.attr（'placeholder'，''）；
}否则{
$（'input[type=text]'）。attr（'placeholder'，'placeholder text…'）；
}
设置超时（闪烁，1000）；
}

如何使用css动画？这是一种jQuery解决方案，应该适用于所有支持占位符属性的操作系统/浏览器，但这确实是一个“糟糕”的解决方案@dr_dev的回答：@NikhilAgrawal这在chrome 39.0.2171.95上有效，但看起来像是需要刷新页面的问题，不确定为什么？！它既适用于Chrome39.0.2171，也适用于Firefox34.0.5。我查过了。请参阅更新的部分。@dr_dev在第一页加载（chrome win7）时不适用于我。页面刷新后，将按预期工作。编辑：如果CSS规则设置在输入元素之后，则在第一页上工作load@dr_dev等着瞧吧

<input type="text" placeholder="Enter Text Here" class="textbox">

input[class="textbox"]::-webkit-input-placeholder {
    color:blue;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

input[class="textbox"]::-moz-placeholder { 
    color:blue;
    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite; 
}

@-moz-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}