如何使用javascript有效地记录用户输入？ [英] How to efficiently record user typing using javascript?

问题描述

我希望能够录制然后回放在textarea中发生的任何事情。

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

我遇到了一些解决方案，但它们不可靠，像通过AJAX发送每次击键。在这种情况下，我最终会在我的数据库中拥有数百万行。

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.

任何想法？

推荐答案

幸运的是，JavaScript事件已经为您解决了所有编码问题。您可以将keyup / keydown / keypress /中的任何内容直接放入数组中的整个事件对象。

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.

每个对象包含：

• 活动类型


• 时间戳


• 使用了什么密钥（或密钥的组合）


• 焦点是什么


• 其他一些可能最终有用的东西。

• 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.

然后，您可以对数组进行编码，并使用您喜欢的ajax方法将其发送到服务器进行存储。

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

因为它是一个数组，所以它们都应该是有序的，但是在奇怪的事件中它是傻瓜，你有关每个事件的时间戳数据（这也可以让你找出事件之间的延迟，如果你有混合按键那么 AWESOME 。）。

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.).

然后您可以重播事件，但是您希望设计它们 - 但现在您不必发明自己的规范，因为w3c的可爱fokes在设计DOM事件规范时为您完成了所有艰苦工作。

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.

这篇关于如何使用javascript有效地记录用户输入？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！