检测HTML文本字段中的更改内容

对于一个主要的学校项目，我正在实现一个实时协作编辑器。对于一个小背景来说，基本上这意味着两个（或更多）用户可以同时键入一个文档，并且他们的更改会自动传播到另一个文档中（类似于Etherpad）

现在我的问题如下：

我希望能够检测用户对HTML文本字段所做的更改。他们可以：

• 插入字符
• 删除字符
• 粘贴字符串
• 剪切字符串

我希望能够检测到发生了哪些更改，然后通知其他客户端，类似于“在位置2插入字符“c”等

无论如何，我希望得到一些关于如何实现这些变化的检测的建议

我的第一次尝试是在改变发生之前和之后考虑卡洛的位置，但是失败了。

---

在我的第二次尝试中，我考虑对textfields新旧值的全部内容进行区分。这个解决方案是否遗漏了任何明显的内容？有更简单的方法吗？

我的伪代码/写出来的响应是（如果我完全理解您的问题的话）使用jQuery检测keyup事件，然后通过ajax将输入保存到服务器，然后也获取响应并将其发布回输入。这不是很有效，但基本上是你不断地发布和检查其他发布的内容。如果您想实时查看其他人在做什么，您可以每隔一秒左右ping一次服务器，并使用响应进行更新

---

当然，所有这些都可以优化，但对于服务器来说，这仍然是一种负担。您还可以查看是否可以为您的项目实施Google Topeka Wave，或者与Google Topeka联系以了解他们是如何做到的：）

这是一项非常艰巨的工作，让它在今天发挥作用，有几个原因，但是

• 也许你只需要限制某些浏览器。阅读：“oninput”的替代方法是监听所有输入事件（键盘、鼠标、dragdrop），我建议使用“oninput”

• html不是完美的。。。甚至html5。输入和文本区域仅支持单个范围 选择。您可以使用designmode/contenteditable而不是 text区域/text字段

• 检测变化的偏移量是一项艰巨的工作：阅读 -- --————

• 您可能需要一个用javascript编写的“diff”算法

个人注意事项：检测单词、字符的变化可能完全没有意义，也没有用处，而是检测段落的变化，或者在类似excel的工作表中，检测单个单元格

我希望这有帮助

---

请随意纠正我的英语

这是我最初的做法。它可以很好地检测击键，但不会检测到其他更改，如剪切和粘贴。我也在考虑这个解决方案，但是如果两个客户端在服务器确认其中一个客户端更改之前都更改了某些内容，是否会发生竞争情况？至于裁剪和粘贴，