javascript - 如何在 Javascript textarea 中捕获事件以记录所有键入的文本

Question

很抱歉用很少的代码发布这样一个一般性问题，但所有谷歌搜索都没有成功。

我想完整记录一个文档创建的过程，我在做这个“文档编辑器”

如果有人输入 Hello world 然后退格最后 5 个字符，然后输入 Joe 我希望结果显示为 Hello Joe用户，但在我的数组中，我希望存储以下内容:

record[0] = 'H';
record[1] = 'e';
record[2] = 'l';
record[3] = 'l';
record[4] = 'o';
record[5] = ' ';
record[6] = 'w';
record[7] = 'o';
record[8] = 'r';
record[9] = 'l';
record[10] = 'd';
record[11] = 'Backspace';
record[12] = 'Backspace';
record[13] = 'Backspace';
record[14] = 'Backspace';
record[15] = 'Backspace';
record[16] = 'J';
record[17] = 'o';
record[18] = 'e';

到目前为止我的代码:

function recordTextArea()
{
  // Record all text

  var record = [];

}

我一直在寻找获取所有这些信息的方法，但我就是做不到。

我希望程序能够记录这个，以便我可以播放文档。

我正在尝试创建一个纯 Javascript 解决方案。

编辑:我需要的只是在文本区域中捕获按键及其值。

Answer 1

在纯 JavaScript 中你想要的是这样的:

var record = [];

document.getElementById('my_txt').onkeyup = function(e){
    record.push(String.fromCharCode(e.keyCode));
};

Live demo

但这会捕获所有键码(包括不可打印的键)。此外，它在不知道字符大小写的情况下捕获字符(您必须分别检查 shift 和 capslock 键的状态)。另一个问题是此代码容易受到撤消/重做操作的影响。

记住这一点，你最好阅读文本区域的内容并将差异保存为以前的状态，如下所示:

theTextArea.onkeyup = function(e){
    var value = new String(theTextArea.value);
    if ( record.length ) {
        var prev = record[record.length - 1];
        var diff = value.length - prev.length;
        var newEntry = {
            length: value.length
        };
        if ( diff < 0 ) {
            newEntry.txtDiff = diff;
        }
        else {
            newEntry.txtDiff = value.substring(value.length - diff);
        }
        record.push(newEntry);       
    }
    else {
        record.push({
            txtDiff: value,
            length: value.length
        });
    }
};

后面示例中的数据结构允许您自由操作文本区域中文本的修订。 See it live here .

编辑:

此外，您可以实现停止输入 事件而不是keyup。这将同时减少:内存和 CPU 使用率。由于这超出了这个问题的范围，您可以在 SO 的其他地方阅读它，例如 here .