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

Question

I am sorry to post such a general question with little code but all googling has been unsuccessful.

I want to record the process of a document being created entirely, I am making this "document editor"

If someone types Hello world and then backspaces the last 5 chars and then types Joe I want the result to be Hello Joe displayed to the user but in my array I want the following stored:

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';

My Code so far:

function recordTextArea()
{
  // Record all text

  var record = [];

}

I have searched for ways to capture all this information but I just can't make it out.

I want the program to be able to record this so that I can play back the document.

I am trying to create a pure Javascript solution.

EDIT: All I need help with is capturing keypresses and their values in a textarea.

Answer 1

In plain JavaScript what you want is this:

var record = [];

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

Live demo

But this captures all key codes (including non-printable keys). Additionally it captures characters without knowing the case of the character (you'd have to check the state of shift and capslock keys separately). One more problem is that this code is vulnerable to undo/redo operations.

Keeping this in mind you'd be better off reading the textarea content and saving the difference as previous state like this:

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

The data structure in the later example alows you to freely manipulate revisions of the text in the textarea. See it live here .

EDIT:

Additionally you can implement an stop typing event instead of keyup . This will decrease both: memory and cpu usage. Since this is out of the scope of this question, you can read about it elswhere on SO, for example here .

Answer 2

Using jQuery, you can just do:

$( 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

Simple as mentioned @Cuberto

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