我试图弄清楚当客户端更改文本时是否可以检测到内容为文本的可编辑 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 之后。
我尝试了什么:
答案 0 :(得分: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>