1

我想制作一个像 Google Wave 这样的聊天程序，它可以实时显示输入的内容。目前我只是使用文本区域。我只想知道用户对 textarea 做了什么更改（一个字符或粘贴的文本），而不必对整个 textarea 执行差异。我是setTimeout在oninput事件中使用 a 的东西，但我相信这只能给我“文本之前”和“文本之后”。有任何想法吗？

4

3 回答 3

1

您将要查看key事件：keydown, keypressed,keyup

W3C 键盘事件

但是您还需要考虑粘贴的文本——它可能没有按键。

一种简化事件处理的策略是有一个“提交”按钮。然后您将知道用户何时完成他们的声明。

于 2012-05-07T14:10:29.740 回答
1

这种类型的功能很可能使用消息批处理类型设置来完成。

以下是它的分解方式：

  1. 将事件处理程序附加到文本区域以跟踪字符级别的修改（think、keydown、keypress、keyup 等）并将它们记录到消息缓冲区中

  2. 您需要备份“结束事务”类型的事件，例如“onchange”、“onpaste”等。这些事件用于检查您的状态的完整性并准备好运行“完全重新同步” （例如，如果您认为自己有不匹配的情况，请向其他客户发出信号以进行完整的“拉动”）

  3. 每隔一段时间（每 0.3 - 1 秒），您清空消息缓冲区并将消息重新传输到其他客户端（直接连接 [websockets？]，或通过服务器间接连接）

  4. 当客户端收到消息时，他们会按照收到的顺序处理它们[希望]以相同的状态、错误或冲突回退：信号完全同步

  5. 在完全同步的客户端上，应重新拉动完整状态并尝试将焦点/胡萝卜尽可能靠近最后一个位置

附带说明：这通过“区域”的概念得到了极大的简化，您可以在不影响我的区域的情况下对您的区域进行干净的完全交换......

希望这会有所帮助-ck

于 2012-05-07T14:20:36.577 回答
1

使用 setInterval 跟踪文本区域的值，并将其与自身进行比较以查看它是否发生变化。这适用于粘贴、普通按键等。

例子：

var lastVal = $("#myTextInput").val();
setInverval(function(){
    if($("#myTextInput").val() != lastVal) {
        lastVal = $("#myTextInput").val();
        // the text changed, do something with the current value (AJAX, whatever)
    }
}, 300);
于 2012-05-07T14:40:06.457 回答