如何使文本自动出现在搜索栏中？答案

【问题标题】：How can I make the text automatically appear in the search bar?如何使文本自动出现在搜索栏中？
【发布时间】：2021-01-12 12:51:57
【问题描述】：

有一个带有键的对象，其值为文本，该文本应出现在网站搜索页面的占位符中。第一个键一次写入一个字母，直到创建整个单词，然后，一次一个字母，将其完全删除，第二个键以相同的方式写入占位符。拨号速度无关紧要。

我正在附上我的作品。现在的问题是所有的key都写好了，但是必须轮流，逐个删除之前的。

let types={
    phrase1:"Words",
    phrase2:"has been",
    phrase3:"deleted",
};

function writer() {
    let curr = 0;
    let text = Object.values(types)
    let elem = document.getElementsByClassName('topnav');

    elem.textContent += text.charAt(curr);

    curr++
        if (curr < text.length )
            window.setInterval(writer,60);

}
writer();

<div class="topnav">
    <input type="text" placeholder=" ">
</div>

【问题讨论】：

请提供更多细节。您想单独打印每个句子的每个字符吗？在什么时间间隔？句子转换之间的期望间隔是多少？
@vsync 是的，应该一个一个写，删掉前面的。任何时候写和删。已经更正了
@AlexLemeshev 所以一次只有一个字符？
@Alex 喜欢一个论点。例如，写“单词”并删除，然后写“已经”并再次删除。对不起，如果我没有准确地写作业
@Alex 这有点像。

标签： javascript function object web

【解决方案1】：

解决方案

调用 setTimeout()，因为它会调用该方法一次，而 setIntervall() 会重复调用它，这在这里没有意义，因为您将在下一次函数调用中再次调用它。
使用递归获取数组的下一个单词

这里定义了三种情况

current letter < wordsArray.length对数组的同一元素应用方法
当 1 为 false 且 value < wordsArray 在下一个数组元素 writer(value+1) 上应用方法
1 和 2 为 false 然后将数组的内容打印为字符串

let types = {
  phrase1: "Words",
  phrase2: "has been",
  phrase3: "deleted",
};

var curr = 0;

function writer(value) {
  let inp = document.getElementById("text");


  let wordArray = Object.values(types)
  let sentence = wordArray[value];
  inp.placeholder = sentence.charAt(curr);
  curr++;

  if (curr < sentence.length){
    window.setTimeout(function() {
      writer(value);
    }, 500);
  }else if(value < wordArray.length-1){
  window.setTimeout(function() {
      curr = 0;
      inp.placeholder = " ";
      writer(value+1);
    }, 500)
  }else {
   inp.placeholder = wordArray.join().replaceAll(",", " ");
  }


}
writer(0);

<div class="topnav">
  <input id="text" type="text" placeholder=" ">
</div>

【讨论】：

最好提供一些带有答案的解释，而不仅仅是代码转储。这样，OP 就能更好地理解您的提议。
let elem 现已过时。
@Reyno 删除了它

【解决方案2】：

我做了一个演示，很少你可以从你的问题中拼凑起来。你真的没有指定任何东西......但我想补充一点，types 变量应该是Array 而不是Object，这样更容易使用。尽管如此，我确实使用了您提供的代码：

const types = {
    phrase1:"Words",
    phrase2:"has been",
    phrase3:"deleted",
}

const inputElm = document.querySelector('.topnav > input')

function iteratePlaceholder(place = 1) {
  inputElm.placeholder = types[`phrase${place||1}`];

  // call this function again only if "place" is less than the length of keys (3)
  (place < Object.keys(types).length) && setTimeout(iteratePlaceholder, 500, ++place)
}

iteratePlaceholder()

<div class="topnav">
    <input type="text" placeholder=" ">
</div>

【讨论】：