如何将Bootstrap的card-title设置为textarea输入内容并适配多卡片场景

你现有代码存在两个核心错误：

• 错误使用closest()方法：closest()只会向上查找元素的祖先节点，而.card-title和textarea同属.card-body的子元素，不存在祖先关系，所以永远匹配不到目标元素
• jQuery对象无法直接调用原生JS的innerHTML属性，需要使用jQuery提供的.text()（纯文本）或.html()（支持HTML标签）方法完成赋值

该方案支持任意数量的card组件，不同card之间逻辑完全独立，不会互相干扰。

调整后HTML代码 #

新增触发用的保存按钮，你可以根据需求调整按钮样式和位置：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- 卡片1 -->
<div class="card mb-3">
  <div class="card-body">
    <div class="questionMainTextAreaContent">
      <div class="questionMainTextAreaContentArea">
        <textarea class="questionMainTextArea" tabindex="0" aria-label="Question title" dir="auto"></textarea>
      </div>
      <button class="btn btn-primary mt-2 save-title-btn">保存标题</button>
    </div>
    <div class="card-title questionHeader"></div>
  </div>
</div>

<!-- 卡片2 可重复新增任意数量 -->
<div class="card">
  <div class="card-body">
    <div class="questionMainTextAreaContent">
      <div class="questionMainTextAreaContentArea">
        <textarea class="questionMainTextArea" tabindex="0" aria-label="Question title" dir="auto"></textarea>
      </div>
      <button class="btn btn-primary mt-2 save-title-btn">保存标题</button>
    </div>
    <div class="card-title questionHeader"></div>
  </div>
</div>

jQuery实现代码 #

// 事件委托绑定，支持后续动态新增的卡片也能正常触发
$(document).on("click", ".save-title-btn", function() {
  // 定位当前按钮所属的卡片容器
  const $currentCard = $(this).closest(".card");
  // 读取当前卡片内textarea的输入值
  const inputContent = $currentCard.find(".questionMainTextArea").val().trim();
  // 赋值给当前卡片的标题区域
  $currentCard.find(".card-title").text(inputContent);
  // 隐藏输入区域
  $currentCard.find(".questionMainTextAreaContent").hide();
});

// 若需要实时预览输入内容，可新增以下逻辑
$(".questionMainTextArea").on("input", function() {
  const $currentCard = $(this).closest(".card");
  $currentCard.find(".card-title").text($(this).val());
});

原生JS实现代码（无需jQuery） #

document.addEventListener("click", function(e) {
  if (!e.target.classList.contains("save-title-btn")) return;
  const currentCard = e.target.closest(".card");
  const textarea = currentCard.querySelector(".questionMainTextArea");
  const titleEl = currentCard.querySelector(".card-title");
  titleEl.textContent = textarea.value.trim();
  currentCard.querySelector(".questionMainTextAreaContent").style.display = "none";
});

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