如何在关闭并重新打开Bootstrap Popover后保留字符计数文本

问题核心是Bootstrap Popover在隐藏/重新显示时，会重新渲染内容DOM，导致计数文本未被重新初始化。以下是具体解决步骤：

1. 封装字符计数逻辑 #

把字符计算和文本更新的逻辑抽成独立函数，方便在输入事件和Popover显示事件中复用：

function updateCharCount(inputEl, countEl) {
  const maxLength = parseInt(inputEl.getAttribute('maxlength'));
  const remaining = maxLength - inputEl.value.length;
  countEl.textContent = `剩余字符：${remaining}`;
}

2. 监听输入框实时更新计数 #

给输入框绑定input事件，实时更新剩余字符提示：

document.addEventListener('input', (e) => {
  if (!e.target.classList.contains('inputincreasebusiness1')) return;
  const countEl = e.target.nextElementSibling;
  updateCharCount(e.target, countEl);
});

3. 利用Popover事件重新初始化计数 #

借助Bootstrap的shown.bs.popover和hidden.bs.popover事件，实现输入值保存与计数文本的恢复：

// 初始化Popover，必须开启HTML支持
const popoverTrigger = document.querySelector('[data-bs-toggle="popover"]');
const popover = new bootstrap.Popover(popoverTrigger, {
  html: true,
  sanitize: false // 允许自定义类与标签，如需安全控制可配置sanitizeOptions
});

// 存储输入值的变量，需持久化可改用localStorage
let savedInputValue = '';

// 隐藏Popover时保存输入值
popoverTrigger.addEventListener('hidden.bs.popover', () => {
  const inputEl = popover._element.querySelector('.inputincreasebusiness1');
  savedInputValue = inputEl.value;
});

// 显示Popover时恢复值并更新计数
popoverTrigger.addEventListener('shown.bs.popover', () => {
  const inputEl = popover._element.querySelector('.inputincreasebusiness1');
  const countEl = popover._element.querySelector('.messagecounttagsp1');
  inputEl.value = savedInputValue;
  updateCharCount(inputEl, countEl);
});

关键说明 #

• 必须开启html: true：否则Popover内容中的HTML元素会被转义，无法获取输入框和计数标签。
• 事件时机选择：shown.bs.popover确保Popover完全渲染后再操作DOM，避免元素未加载的问题。
• 持久化扩展：若需页面刷新后仍保留数据，将savedInputValue替换为localStorage.getItem/setItem即可。

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