如何用JavaScript实现类似搜索框的自动输入删除多文本效果

嘿，我刚好做过类似的动态打字效果，给你整理了一套适配多句子循环的完整方案，完全匹配你想要的“逐个输入→暂停→逐个删除→切换句子重复”的逻辑👇

核心思路 #

这个效果的本质是通过定时器控制输入框内容的逐字符更新，核心逻辑分四步：

1. 维护一个待展示的句子数组，按顺序循环处理每个句子
2. 用状态变量跟踪当前是输入模式还是删除模式，以及当前处理到哪个句子、哪个字符
3. 输入完成后暂停一段时间，再切换到删除模式；删除完成后再暂停，切换到下一个句子
4. 用setInterval控制打字/删字的速度，确保节奏自然

完整实现代码 #

HTML结构 #

首先需要一个搜索输入框：

<input type="text" id="searchInput" placeholder="搜索轮胎..." style="padding: 8px 12px; font-size: 16px; width: 300px;" />

JavaScript逻辑 #

这里把可配置的参数单独抽出来，方便你后期调整速度、句子内容：

// 可自定义的配置项，按需修改
const typingConfig = {
  sentences: ["夏季轮胎限时特惠", "全季节轮胎全场8折", "高性能轮胎买一送一"], // 要循环展示的句子
  typeSpeed: 180, // 打字速度（毫秒/每个字符）
  deleteSpeed: 120, // 删字速度（毫秒/每个字符）
  pauseAfterType: 2200, // 输入完句子后暂停的时间
  pauseAfterDelete: 600 // 删除完句子后暂停的时间
};

// 获取目标输入框
const searchInput = document.getElementById("searchInput");

// 状态变量：跟踪当前的打字进度
let currentSentenceIdx = 0;
let currentCharIdx = 0;
let isDeleting = false;
let timerId = null;

// 核心打字/删字函数
function runTypingEffect() {
  const currentSentence = typingConfig.sentences[currentSentenceIdx];

  if (!isDeleting) {
    // 输入模式：逐个添加字符到输入框
    searchInput.value = currentSentence.slice(0, currentCharIdx + 1);
    currentCharIdx++;

    // 当输入完当前句子，切换到删除模式，先暂停一会
    if (currentCharIdx === currentSentence.length) {
      isDeleting = true;
      clearInterval(timerId);
      timerId = setInterval(runTypingEffect, typingConfig.pauseAfterType);
      return;
    }
  } else {
    // 删除模式：逐个减少输入框的字符
    searchInput.value = currentSentence.slice(0, currentCharIdx - 1);
    currentCharIdx--;

    // 当删除完当前句子，切换到下一个句子，回到输入模式，先暂停
    if (currentCharIdx === 0) {
      isDeleting = false;
      // 用取余实现句子数组的无限循环
      currentSentenceIdx = (currentSentenceIdx + 1) % typingConfig.sentences.length;
      clearInterval(timerId);
      timerId = setInterval(runTypingEffect, typingConfig.pauseAfterDelete);
      return;
    }
  }

  // 根据当前模式设置定时器间隔
  const interval = isDeleting ? typingConfig.deleteSpeed : typingConfig.typeSpeed;
  clearInterval(timerId);
  timerId = setInterval(runTypingEffect, interval);
}

// 启动效果
runTypingEffect();

// 页面卸载时清除定时器，避免内存泄漏
window.addEventListener('beforeunload', () => {
  clearInterval(timerId);
});

关键细节优化 #

• 可配置化：所有速度、暂停时间、句子内容都放在typingConfig里，你可以直接修改匹配目标网站的节奏
• 内存泄漏防护：页面关闭时清除定时器，避免不必要的后台任务
• 自然节奏：输入和删除完成后的暂停，让效果不会显得太突兀，更贴近真实用户的操作感
• 无限循环：用%运算符实现句子数组的循环遍历，不用手动处理边界情况

额外拓展建议 #

如果需要更贴近真实场景，可以加这些功能：

• 给输入框添加focus事件，当用户点击输入框时暂停打字效果，blur时恢复
• 调整typeSpeed和deleteSpeed的数值，让打字速度更接近目标网站的节奏
• 如果要支持带样式的文本（比如高亮关键词），可以把input换成div，用innerHTML代替value，不过搜索框一般用input就足够啦

内容的提问来源于stack exchange，提问作者Bhavik V.