使用 Javascript/CSS 旋转、转换占位符文本 [关闭]

【问题标题】：Rotating, transitioning placeholder text with Javascript/CSS [closed]使用 Javascript/CSS 旋转、转换占位符文本 [关闭]
【发布时间】：2015-11-08 07:18:16
【问题描述】：

我有一个简单的文本输入。我希望输入有一个占位符，可以在各种值之间旋转，其中值之间存在某种转换。

例如，占位符以“peach”开头，然后 1 秒后淡出，“mango”淡入，然后淡出，“banana”淡入，依此类推。

最好的方法是什么？我不相信可以用 JS 淡化占位符，尽管可以用 JS 更改值。无论如何，也许有一种更好的纯 CSS 方法来做到这一点？

【问题讨论】：

你试过了吗？
您可以简单地使用jQuery淡化文本，用于文本旋转使用transform: rotate(x deg);
像 :-moz-placeholder 这样的类是伪类，它们不是 DOM 的一部分。旋转是指文本是交替的。
而我只是尝试使用 CSS 动画来做到这一点，不工作。
在该输入之上创建覆盖有什么问题？

标签： javascript css html placeholder

【解决方案1】：

输入占位符不能被淡化，因为它们不能被设置样式（有些浏览器可能通过扩展或vendor-specific rules 允许这样做，您可以使用 RGBA 颜色模拟淡化 - 随着时间的推移对 alpha 值进行动画处理或补间输入背景颜色的颜色值），但您可以轻松更改其文本。

这是我快速为您绘制的示例：

var delay = 1000;
var vals = ['peach', 'mango', 'banana'];
var input = document.getElementById('i');

for (var i = 0; i < vals.length; i++) {
    set(vals[i], i * delay);
}

function set(v, d) {
    setTimeout(function () {
        setInterval(function () {
            input.setAttribute('placeholder', v);            
        }, delay * vals.length);
    }, d);
}

&lt;input id="i" placeholder="starting" /&gt;

【讨论】：

谢谢，我将以此为基础，看看我能不能得到一些工作。
我最终使用了这样的东西：jsfiddle.net/Z3tFG/843
非常好！我认为您充分利用了占位符。