[英]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解決方案。
編輯:我需要幫助的是在textarea中捕獲按鍵及其值。
在純JavaScript中你想要的是這個:
var record = [];
document.getElementById('my_txt').onkeyup = function(e){
record.push(String.fromCharCode(e.keyCode));
};
但這會捕獲所有密鑰代碼(包括不可打印的密鑰)。 此外,它在不知道角色情況的情況下捕獲角色(您必須分別檢查移位和封鎖鍵的狀態)。 另一個問題是此代碼易受撤消/重做操作的影響。
記住這一點,你最好還是閱讀textarea內容並保存差異,就像之前的狀態一樣:
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
});
}
};
后面的示例中的數據結構允許您自由地操作textarea中文本的修訂。 在這里看到它 。
編輯:
此外,您可以實現停止鍵入事件而不是keyup
。 這將減少:內存和CPU使用率。 由於這超出了這個問題的范圍,你可以在SO上閱讀它,例如這里 。
使用jQuery,你可以這樣做:
$( function() {
var record = [];
$( "#myText" ).on( "keypress", function( evt ) {
record.push( String.fromCharCode( evt.which ) );
});
});
var txtarea = document.getElementById('txtarea'),
record = [];
txtarea.addEventListener('keydown', recordTextArea);
function recordTextArea(e){
record.push(String.fromCharCode(e.which));
}
簡單如上所述@Cuberto
var record = [];
document.getElementById("mytextBox").onkeypress=
function(event){
record.push( String.fromCharCode( event.which ) );
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.