JavaScript，HTML:具有多个值的循环占位符名称

Question

如何使占位符逐渐淡入并淡出。1秒钟后，占位符"Search by ID"将更改为"按名称搜索"，1秒钟后，它将更改为 "Search by Location"，然后在1秒钟后返回到 "Search by ID"等...（一个循环）。

<div id="search">
    <input id="inquire" type="text" placeholder="Search by ID" />
</div>
add:
placeholder="Search by Name"
placeholder="Search by Location"

Answer 1

您可以尝试 -

/*Define your texts in an array*/
var placeholders = ['Search by ID','Search by Name','Search by Location'];
var length  = placeholders.length;
var counter = 0;
/*Store the object to a variable*/
var inquire = document.getElementById('inquire');
function ChangePlaceholder(){
  /*Compare with placeholders length*/
  if(counter>=length){
    counter=0;
  }
 /*Update placeholder text*/
 inquire.setAttribute('placeholder',placeholders[counter]);
 /*Update counter as Index*/
 counter++;
}
/*Call ChangePlaceholder() function after 1 seconds, [1000 millisecond = 1 second]*/
setInterval(ChangePlaceholder,1000);

<div id="search">
    <input id="inquire" type="text" placeholder="Search by ID" />
</div>

这是有关setInterval（）函数的详细信息

Answer 2

这是使用setInterval的一种方法：

//select input
var input = document.getElementById('inquire');
//array of strings to loop through
var strArr = ['Search by ID', 'Search by Name', 'Search by Location'];
//counter to keep track of loops
var counter = 0;
//interval that will execute at one second intervals
var interval = setInterval(function() {
//sets the placeholder attribute to a different string 
input.setAttribute('placeholder',  strArr[counter])
  counter++;
  if (counter == 3) {
    counter = 0;
  }
}, 1000)

<div id="search">
  <input id="inquire" type="text" placeholder="Search by ID" />
</div>

这是小提琴：https：//jsfiddle.net/g6erhs5r/12/