使用 JQuery 循环浏览表单中的占位符文本？答案

【问题标题】：Cycle through placeholder text in form with JQuery?使用 JQuery 循环浏览表单中的占位符文本？
【发布时间】：2013-08-25 18:03:32
【问题描述】：

我对 JQuery 还很陌生，所以我不知道从哪里开始解决这个问题。

我在一个网站上有一个表格，我想暂时显示各种占位符并循环浏览它们（模仿用户可以在那里输入的许多选项；例如 Alice、Bob、Charles 等用于 NAME 表格输入）在用户点击输入自己的文本之前。

我找到了这个示例 - http://jsfiddle.net/eFjnU/（下面的代码） - 循环显示文本，但我如何将其应用于表单输入区域中的临时占位符？

HTML

<div id="content-1">Sample text 1</div>
<div id="content-2">Sample text 2</div>
<div id="content-3">Sample text 3</div>
<div id="content-4">Sample text 4</div>
<div id="content-5">Sample text 5</div>
<div id="content-6">Sample text 6</div>
<div id="content-7">Sample text 7</div>

jQuery

var divs = $('div[id^="content-"]').hide(),
    i = 0;

(function cycle() { 

    divs.eq(i).fadeIn(400)
              .delay(1000)
              .fadeOut(400, cycle);

    i = ++i % divs.length;

})();

您可以将上面的内容从 div 更改为 input，但这会使整个输入框循环进出，我只希望占位符文本淡入/淡出。

编辑 1：

例如：

<input type="text" name="whatever" type="text" placeholder="Alice">
<input type="text" name="whatever" type="text" placeholder="Bob">
<input type="text" name="whatever" type="text" placeholder="Charles">

【问题讨论】：

不太清楚你要做什么
你想让它们都在同一个输入上？
你不能动画占位符文本，最多你可以让它出现/消失，就像这样jsfiddle.net/UrLnJ

标签： jquery

【解决方案1】：

您不能为占位符文本设置动画，但可以创建一个定期更改属性的函数：

Demo fiddle

var placeholders = ['Alice','Bob','Charles'];

(function cycle() { 
    var placeholder = placeholders.shift();
    $('input').attr('placeholder',placeholder);
    placeholders.push(placeholder);
    setTimeout(cycle,1000);
})();

这基本上就是你想要的减去淡入/淡出

【讨论】：

@FaceOfJock delay() 默认情况下仅适用于动画队列，如果您要使用延迟，则必须在元素上调用它，它不是全局函数
我也尝试使用 setTimeout，但它不起作用：jsfiddle.net/kADwN 有什么建议吗？
@FaceOfJock 您需要将超时代码包装在匿名函数中，如果您要进行循环，则需要在每次迭代时增加超时延迟jsfiddle.net/kADwN/1
非常感谢，非常有帮助:)

【解决方案2】：

占位符文本需要一个容器。这可以是任何东西。就像输入字段上方或下方的跨度或标签标签一样简单。

【讨论】：

不确定这是否可行；见新编辑。我正在寻找循环输入标签的占位符文本。