Question

我是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更改为输入，但这会循环整个输入框，我只希望占位符文本淡入/淡出。

编辑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">

Answer 1

您无法为占位符文本制作动画，但您可以创建一个定期更改属性的函数：

<强> Demo fiddle

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

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

这基本上是你想要的减去fadeIn / fadeOut

Answer 2

占位符文本需要一个容器。这可能是任何事情。就像输入字段上方或下方的span或label标签一样简单。

使用JQuery在表单中循环占位符文本？

2 个答案: