使用Typed.js更新textarea时陷入循环反复清空内容问题求助

问题原因 #

你遇到的循环清空问题，核心在于两点：

• 每次调用updateTextFieldWithTypedJs都会创建新的Typed实例，但旧实例未被销毁，多个实例同时操作同一个textarea，导致内容被反复清空覆盖
• 代码里elementToShowResponse.text();无法正确清空textarea内容；同时bindInputFocusEvents: true会绑定输入框焦点事件，在实例切换时触发不必要的内容重置

解决方案 #

通过以下修改解决冲突：

• 维护全局的Typed实例引用，每次更新前销毁旧实例
• 使用正确的方法清空textarea内容
• 关闭不必要的焦点事件绑定（若无需监听输入框焦点状态）

修改后的完整代码 #

JavaScript 部分

let sampleText1 = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada odio in massa ornare, vel pellentesque felis mollis.";
let sampleText2 = "Vestibulum at eros aliquam, ultricies lacus non, vehicula tortor. Praesent vulputate lorem sed faucibus vehicula. ";

// 全局保存Typed实例引用，用于后续销毁旧实例
let typedInstance = null;

$(function() {
  let elementToShowResponse = $('.row').find('.test-field');
  updateTextFieldWithTypedJs(elementToShowResponse, sampleText1);

  setTimeout(function() {
    updateTextFieldWithTypedJs(elementToShowResponse, sampleText2);
  }, 5000);
})

function updateTextFieldWithTypedJs(elementToShowResponse, sampleText) {
  // 销毁已存在的旧实例，避免多实例冲突
  if (typedInstance) {
    typedInstance.destroy();
  }
  // 正确清空textarea内容（textarea需用val()操作）
  elementToShowResponse.val('');
  // 创建新的Typed实例
  typedInstance = new Typed(elementToShowResponse.get(0), {
    strings: [sampleText],
    typeSpeed: 50,
    loop: false,
    bindInputFocusEvents: false, // 关闭焦点事件绑定，避免干扰
    showCursor: false
  });
}

HTML 部分

<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>

<div class="row">
  <textarea name="test_field" class="test-field" id="test_field" cols="30" rows="3"></textarea>
</div>

关键修改说明 #

• 新增typedInstance变量存储实例，每次更新前调用destroy()销毁旧实例，彻底终止其对textarea的操作
• 用elementToShowResponse.val('')替代无效的text()方法，符合textarea的内容操作逻辑
• 将bindInputFocusEvents设为false，该选项用于让Typed.js响应输入框焦点状态（如失焦暂停、聚焦继续），若业务场景无需此功能，关闭后可避免不必要的事件干扰

内容的提问来源于stack exchange，提问作者Aayush Dahal