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

问题描述

我试图弄清楚当客户端更改文本时是否可以检测到内容为文本的可编辑 div。我正在尝试设计一个简单的个人资料页面，用户可以在其中单击 div 并对其进行编辑，当他们完成编辑后，该 div 的内容将存储为要发送到我的 API 的 Javascript 变量。我对网络开发还很陌生，如果有人能启发我如何在 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. 我在堆栈溢出中搜索了类似的问题，但没有找到一个特定于 Javascript 的问题
2. 我想过使用一个按钮，当他们点击一个 div 时，该按钮出现并在点击后获取该 div 的内容。我对此感到气馁，因为我不确定如何首先检测 div 点击，我想看看是否有无按钮解决方案。

解决方法

您可以使用 "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>