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

Question

我正在尝试弄清楚当客户端更改文本时是否有可能检测到内容为文本的 contenteditable div。我正在尝试设计一个简单的个人资料页面，用户可以在其中单击 div，对其进行编辑，当他们完成编辑后，div 的内容将作为 Javascript 变量存储到发送到我的 API。我是网络开发的新手，如果有人启发我如何在 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 之后。

我尝试了什么：

我在堆栈溢出中搜索了类似的问题，但没有找到一个Javascript具体的
我想使用一个按钮，当他们单击 div 时，该按钮会出现并在单击后获取 div 的内容。这让我很沮丧，因为我一开始就不确定如何检测 div 点击，我想看看是否有 none 按钮解决方案。

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>

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

How To Detect If Content Of contenteditable div Was Changed

html

javascript

css

frontend

contenteditable