如何捕获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解决方案。

编辑：我需要帮助的是在textarea中捕获按键及其值。

Answer 1

在纯JavaScript中你想要的是这个：

var record = [];

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

现场演示

但这会捕获所有密钥代码（包括不可打印的密钥）。 此外，它在不知道角色情况的情况下捕获角色（您必须分别检查移位和封锁键的状态）。 另一个问题是此代码易受撤消/重做操作的影响。

记住这一点，你最好还是阅读textarea内容并保存差异，就像之前的状态一样：

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
        });
    }
};

后面的示例中的数据结构允许您自由地操作textarea中文本的修订。 在这里看到它 。

编辑：

此外，您可以实现停止键入事件而不是keyup 。 这将减少：内存和CPU使用率。 由于这超出了这个问题的范围，你可以在SO上阅读它，例如这里 。

Answer 2

使用jQuery，你可以这样做：

$( function() {
  var record = [];
  $( "#myText" ).on( "keypress", function( evt ) {
    record.push( String.fromCharCode( evt.which ) );
  });
});

Answer 3

var txtarea = document.getElementById('txtarea'),
    record = [];

txtarea.addEventListener('keydown', recordTextArea);

function recordTextArea(e){
    record.push(String.fromCharCode(e.which));
}

Answer 4

简单如上所述@Cuberto

var record = [];
document.getElementById("mytextBox").onkeypress=
   function(event){
   record.push( String.fromCharCode( event.which ) );
};