title: How to capture events in Javascript textarea for recording all typed text
body: <p>I am sorry to post such a general question with little code but all googling has been unsuccessful.</p>
  
  <p>I want to record the process of a document being created entirely, I am making this "document editor"</p>
  
  <p>If someone types <code>Hello world</code> and then backspaces the last 5 chars and then types <code>Joe</code> I want the result to be <code>Hello Joe</code> displayed to the user but in my array I want the following stored:</p>
  
  <pre><code>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';
  </code></pre>
  
  <p>My Code so far:</p>
  
  <pre><code>function recordTextArea()
  {
    // Record all text
  
    var record = [];
  
  }
  </code></pre>
  
  <p>I have searched for ways to capture all this information but I just can't make it out.</p>
  
  <p>I want the program to be able to record this so that I can play back the document.</p>
  
  <p>I am trying to create a pure Javascript solution.</p>
  
  <p>EDIT: All I need help with is capturing keypresses and their values in a textarea.</p>