javascript - 使 html 文本字段中的占位符文本闪烁

Question

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

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

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

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

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

fiddle :http://jsfiddle.net/rkwa19se/6/