如何解决typed.js终端模拟组件中旧文本短暂复现问题

我用typed.js开发了一个模拟终端显示的网页组件，核心功能是从预加载的字符串数组中逐行打印内容，新行打印时内容向上滚动。目前整体功能正常，但存在一个关键问题：每次打印新字符串前，上一行的内容会短暂出现在当前行，随后被删除再打印新内容（比如测试中Running...会在Booting...打印前闪一下），调整backSpeed等参数也无法解决。

预期效果是标准终端逻辑：字符串打印完成后“提交”上移一行，底部出现带闪烁光标的空白行等待下一个内容；新字符串打印后再次提交，循环完所有字符串后，底部保留空白行和光标。

解决方案 #

核心思路是分离终端的历史内容区与当前输入区，避免让Typed.js通过退格操作复用同一行元素，彻底消除旧内容闪烁的问题。

1. 重构终端DOM结构 #

将终端拆分为两个部分：历史区存放已完成打印的内容，输入区负责当前行的打印与光标显示：

<div class="terminal">
  <div class="terminal-history"></div>
  <div class="terminal-input">
    <span class="cursor">_</span>
  </div>
</div>

2. 配置终端样式 #

添加基础样式并实现光标闪烁效果：

.terminal {
  background: #000;
  color: #0f0;
  padding: 10px;
  font-family: monospace;
  height: 300px;
  overflow-y: auto;
}
.terminal-history {
  margin-bottom: 5px;
}
.terminal-input {
  display: flex;
  align-items: center;
}
.cursor {
  animation: blink 1s infinite;
}
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

3. 重写Typed.js逻辑 #

每次完成一行打印后，将内容“固化”到历史区，再清空输入区开始下一行打印：

const terminal = document.querySelector('.terminal');
const terminalHistory = document.querySelector('.terminal-history');
const terminalInput = document.querySelector('.terminal-input');
const cursor = document.querySelector('.cursor');
// 预加载的字符串数组
const lines = ["Booting system...", "Initializing components...", "Running diagnostics...", "System ready!"];
let currentLineIndex = 0;

function printNextLine() {
  if (currentLineIndex >= lines.length) {
    // 所有行打印完成，保留空白输入行与光标
    return;
  }

  // 创建临时元素用于Typed打印当前行
  const tempSpan = document.createElement('span');
  terminalInput.insertBefore(tempSpan, cursor);

  const typed = new Typed(tempSpan, {
    strings: [lines[currentLineIndex]],
    typeSpeed: 50,
    showCursor: false, // 使用自定义光标
    onComplete: function() {
      // 将当前行转移到历史区
      const historyLine = document.createElement('div');
      historyLine.textContent = tempSpan.textContent;
      terminalHistory.appendChild(historyLine);
      // 移除临时打印元素
      tempSpan.remove();
      // 自动滚动到终端底部
      terminal.scrollTop = terminal.scrollHeight;
      currentLineIndex++;
      // 模拟终端命令间隔
      setTimeout(printNextLine, 500);
    }
  });
}

// 启动终端打印流程
printNextLine();

方案说明 #

之前的“幽灵文本”问题源于Typed.js复用同一元素打印多行时，会先执行退格删除上一行内容，导致旧内容短暂显示。现在通过分离历史区与输入区，每次打印完成就将内容固化到历史，输入区始终从空白状态开始新行打印，彻底规避了退格操作带来的闪烁问题，完全贴合标准终端的提交换行逻辑。

内容的提问来源于stack exchange，提问作者Jim Diroff II