如何从textarea获取新输入的文本？

Question

我想创建一个像Google Wave这样的聊天程序，可以实时显示输入的内容。目前我只是使用textarea。我只是想知道用户对textarea（一个字符或粘贴的文本）所做的更改，而不必在整个textarea上执行diff。我在使用setTimeout和oninput事件的过程中有所不同，但我相信这只会给我“文本前”和“文本之后”。有什么想法吗？

Answer 1

您需要查看key个活动：keydown，keypressed，keyup

W3C keyboard events

但是你还需要考虑粘贴的文本 - 可能没有按键。

简化事件处理的一个策略是使用“提交”按钮。然后，您将知道用户何时完成了他们的陈述。

Answer 2

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

以下是它会如何分解：

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

2. 您需要备份“最终交易”类型的事件，例如“onchange”，“onpaste”等等，用于检查您的状态的完整性并准备运行“完全重新同步”（例如，如果您认为自己不匹配，则表示其他客户完全“拉”）

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

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

完整同步客户端上的

5. 应重新拉出完整状态并尝试将焦点/胡萝卜放在尽可能靠近最后位置的位置

侧面说明：通过“区域”概念大大简化了这一点，您可以在不影响我的地区的情况下清理您所在地区的全部互换...

希望这有助于确认

Answer 3

使用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);