Question

I’d like to be able to record then playback whatever happened in a textarea.

I’ve came across some solutions but they’re not reliable, Like sending each keystroke via AJAX. In that case i’ll end up having millions of rows in my DB.

The idea that i had in mind is to log the keystrokes to a variable in client side, updating that variable with the action, but keeping track of time between each keystoke. Also making sure that it supports deleting data as well.

At the end i’d send this whole variable to the db one time, then i can decode it later for playback.

Mind Map of what the variable would look like:

   hellooo[1.2][backspace][0.6][backspace]World![return]
Idle time __^     Removes one char __^

I believe that google docs is doing something like that to playback whatever users were typing.

Any Ideas?

Answer 1

Luckily JavaScript events already take care of all the encoding issues for you. You can just toss the whole event object that a keyup/keydown/keypress/whatever was directly into an array.

Each object contains:

• Type of event
• Timestamp
• What key was used (or combination of keys)
• What was in focus
• Some other stuff that might end up being useful.

You can then just encode the array and send it off with your favourite ajax method to the server for storage.

So your code only needs a function that can store data. Don’t use this exact function it’s just for demonstration purposes.

var handler = function (e) { 
    handler.data.push(e);
    console.log(handler.data);
}
handler.data = [];

window.addEventListener("keyup",    handler); 
window.addEventListener("keydown",  handler); 
window.addEventListener("keypress", handler);

Since it’s an array, they should all be in order, but in the odd event it goofs, you have timestamp data on each event (which also lets you find out the delay between events, which is AWESOME if you have mixed keypresses.).

You can then replay events however you wish to design them — but now you don’t have to invent your own spec because the lovely fokes at w3c did all the hard work for you when they designed the DOM event spec.