使html文本字段中的占位符文本闪烁答案

【问题标题】：Make placeholder text inside html text field blink使html文本字段中的占位符文本闪烁
【发布时间】：2015-02-22 15:56:35
【问题描述】：

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

所以实际上我在这样的 html 文本字段中有一个占位符文本

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

所以我想要的是让这个占位符闪烁。那么是否可以在 html 中或使用 jquery 或 javascript。

【问题讨论】：

用css动画怎么样？
这是一种 jQuery 解决方法，应该适用于支持占位符属性的所有操作系统/浏览器，但这确实是一个“糟糕”的解决方案，比较 @dr_dev 的答案：jsfiddle.net/jda339up

标签： javascript jquery html html-input

【解决方案1】：

您可以使用简单的 CSS 动画来做到这一点。不确定，这有多少跨浏览器兼容。适用于 Chrome 和 Firefox。

HTML：

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

CSS：

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; }
}

小提琴：http://jsfiddle.net/rkwa19se/6/

【讨论】：

@NikhilAgrawal 这适用于 chrome 39.0.2171.95，但看起来像是页面需要刷新的问题，不知道为什么？！
它适用于 Chrome 39.0.2171 和 Firefox 34.0.5。我已经检查过了。请参阅更新的部分。
@dr_dev 在第一页加载时对我不起作用（chrome win7）。页面刷新后，按预期工作。编辑：如果在输入元素之后设置 CSS 规则，则适用于第一页加载
@dr_dev 等待会检查

【解决方案2】：

这是一种仅限 jQuery 的方法：

function blinker() {

  if ($('input[type=text]').attr('placeholder')) {
    // get the placeholder text
    $('input[type=text]').attr('placeholder', '');
  } else {
    $('input[type=text]').attr('placeholder', 'Placeholder Text...');
  }

  setTimeout(blinker, 1000);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body onload="blinker()">
  <input type="text" onclick="blinker()" class="timepicker" placeholder="Placeholder Text...">
</body>

【讨论】：