如何将bootstrap中的card-title设置为文本输入区域

Question

所以我有一个卡片，用户文本在文本区，然后点击一个按钮，使其消失，并显示为card-titlediv，但它不会注册任何输入。

卡片将被重复多次，所以我需要使事件侦听器能够区分不同的卡片。

我所尝试的是下面的jquery和一些javascript像这样:

let questionHeaderInput = document.querySelectorAll(".questionMainTextArea");
let questionHeader = document.querySelectorAll(".card-title");
questionHeaderInput.forEach(item => {
questionHeader.innerHTML = item.value;
});

$(".questionMainTextArea").on("change paste keyup input", function() {
$(this).closest(".card-title").innerHTML = $(this).val();
});

<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>
<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>
</div>
<div class="card-title questionHeader"></div>
</div>
</div>

Answer 1

您可以尝试jQuery版本，首先瞄准最接近的.card-body，然后找到.card-title。你不能在jQuery引用对象上使用innerHTML，你应该使用.text()。另外，在input上附加事件就足够了。

演示:

$(".questionMainTextArea").on("input", function() {
$(this).closest(".card-body").find(".card-title").text($(this).val());
});

<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>
<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>
</div>
<div class="card-title questionHeader"></div>
</div>
</div>