如何检测 contenteditable div 的内容是否已更改

Question

我正在尝试确定当客户端更改文本时，是否可以检测到具有文本内容的contenteditable div。我正在设计一个简单的个人资料页面，用户可以点击div进行编辑，完成编辑后，该div的内容会存储为Javascript变量并发送到我的API。我对Web开发相当新，如果有人能告诉我如何在JavaScript中完成这个任务，我将不胜感激。

相关代码：

   <div class="bio1" contenteditable="true" name="bio" id="bio">
   Apparently, this user prefers to keep an air of mystery about them.
   <br>
   <br>
   <hr class="hrStyle">

标签是关闭的，但在许多其他 div 后。

我的尝试：

1. 我在 stack overflow 上搜索了类似的问题，但没有找到一个特定于 Javascript 的问题
2. 我想使用一个按钮，当他们点击一个 div 时，按钮会出现并获取那个 div 的内容。我被这个问题所困扰，因为我不确定如何在第一次点击时检测到 div 点击事件，而且我想看看是否有一个无需按钮的解决方案。

- user14304565

---

这是一个更新的 JSFiddle，展示如何捕获 div 中的内容。与其将内容填充到文本区域中，你可以将其保存为文件。参考链接：https://dev59.com/8mEi5IYBdhLWcg3wN6Nt - G-Cyrillus

Answer 1

您可以使用"input"事件来监听键盘或粘贴所做的所有更改。

至于完成，这可能需要一个按钮，以便用户指示他们已完成，或使用计时器将存储的值与当前值进行比较，以检查是否已进行更改。

document.getElementById('bio').addEventListener('input', function(){
   console.clear()
   console.log(this.innerHTML)
})

<div class="bio1" contenteditable="true" name="bio" id="bio">
  Apparently, this user prefers to keep an air of mystery about them.
  <br>
  <br>
  <hr class="hrStyle">
</div>

- charlietfl