如何在Javascript文本区域中捕获事件以记录所有键入的文本
How to capture events in Javascript textarea for recording all typed text
我很抱歉用很少的代码发布这样一个普通的问题,但所有的谷歌搜索都没有成功。
我想完全记录一个文档的创建过程,我正在制作这个"文档编辑器"
如果有人键入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解决方案。
编辑:我只需要在文本区域中捕捉按键及其值。
在纯JavaScript中,您想要的是:
var record = [];
document.getElementById('my_txt').onkeyup = function(e){
record.push(String.fromCharCode(e.keyCode));
};
现场演示
但这会捕获所有密钥代码(包括不可打印的密钥)。此外,它在不知道字符大小写的情况下捕获字符(您必须分别检查shift键和capslock键的状态)。还有一个问题是,此代码容易受到撤消/重做操作的攻击。
记住这一点,你最好阅读文本区域的内容,并将差异保存为以前的状态,如下所示:
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
});
}
};
后面示例中的数据结构允许您自由操作文本区域中的文本修订。在这里直播吧。
编辑:
此外,您可以实现停止键入事件,而不是keyup
。这将同时减少内存和cpu的使用。由于这超出了这个问题的范围,你可以在SO的其他地方阅读,例如这里。
var txtarea = document.getElementById('txtarea'),
record = [];
txtarea.addEventListener('keydown', recordTextArea);
function recordTextArea(e){
record.push(String.fromCharCode(e.which));
}
使用jQuery,您可以执行以下操作:
$( function() {
var record = [];
$( "#myText" ).on( "keypress", function( evt ) {
record.push( String.fromCharCode( evt.which ) );
});
});
简单如前所述@Cuberto
var record = [];
document.getElementById("mytextBox").onkeypress=
function(event){
record.push( String.fromCharCode( event.which ) );
};
相关文章:
- 使用自动完成文本框从mysql数据库获取表记录并显示在文本字段中
- 我的文本区域没有正确记录输出
- 如何在Javascript文本区域中捕获事件以记录所有键入的文本
- 是否可以更改输入[类型=文本]历史记录
- “自动完成”文本框未前进到下一条记录
- 使用 JavaScript 中的文本框在数据库中插入记录
- 如何将 html 链接点击记录到文本文件
- 记录选定的文本位置,给出错误的结果
- 将值添加到文本框历史记录中,而无需使用 JavaScript 或 Jquery 提交表单
- 如何将访问者 IP 记录到文本文件或 PHPMyAdmin 中
- Photoshop 脚本 - 如何在一种历史记录状态下创建文本图层
- 在输入(文本框)字段中按下回车键时验证并提交表单,但在按下回车键后不选择历史记录
- 如何删除'每页记录'标记数据表中的文本
- 是否可以记录在浏览器中键入的文本's控制台
- 如何在范围中记录文本
- 记录页面上文本的匿名编辑
- php . .使用文本文件在分号表中插入(追加)一条记录
- 如何使文本框自动完成结果选择直接导航到记录详细信息
- PHP或javascript文本文件分号db使用一个记录显示另一个悬停
- 如何在javascript中突出显示相等的忽略大小写搜索文本记录