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

【问题标题】：How can I get the newly entered text from a textarea?如何从 textarea 中获取新输入的文本？
【发布时间】：2012-05-07 14:04:11
【问题描述】：

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

【问题讨论】：

您可能需要花一些时间查看meteor.js meteor.com 这是一个用于编写实时应用程序的javascript框架——比如聊天。

标签： javascript dom-events textarea

【解决方案1】：

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

下面是它的分解方式：

将事件处理程序附加到文本区域以跟踪字符级别的修改（think、keydown、keypress、keyup 等）并将它们记录到消息缓冲区中
您需要为“结束事务”类型事件（如“onchange”、“onpaste”等）进行备份，以检查您的状态的完整性并准备运行如果您认为不匹配，则“完全重新同步”（例如，向其他客户端发出信号以进行完全“拉动”）
每隔一段时间（每 0.3 - 1 秒），您清空消息缓冲区并将消息重新传输到其他客户端（直接连接 [websockets？]，或通过服务器间接）
李>
当客户端收到消息时，他们会按照收到消息的顺序处理它们 [希望] 以相同的状态、错误或冲突回退结束：信号完全同步
在完全同步的客户端上，应重新拉取完整状态并尝试将焦点/胡萝卜尽可能靠近最后一个位置

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

希望这有助于 -ck

【讨论】：

【解决方案2】：

您需要查看key 事件：keydown、keypressed、keyup

W3C keyboard events

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

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

【讨论】：

【解决方案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);

【讨论】：