我正在文本区域中制作一种文本编辑器,在那里我处理用户输入,包括选项卡。每次用户输入内容时,我都会运行一个page ate()
函数,该函数在页面上正确地对文本进行分页,这个函数大约需要20毫秒。现在,因为我不想在文本区域被分页时处理第二个输入,所以我添加了一个条件,但是这样我就失去了ctrl-V
我通过首先保存上下文和事件来再次调用该函数。函数确实再次被调用,但粘贴仍然没有发生!
HTML:
<textarea id="taEditor"></textarea>
Javascript:
$("#taEditor").on('click keydown cut paste', processUserInput);
var IsProcessingEvent = false;
function processUserInput(e) {
if(!IsProcessingEvent) {
IsProcessingEvent = true;
//do various stuff before the textarea changes like: get value, get cursor pos etc
var taValueBefore = document.getElementById("taEditor").value;
if (e.keyCode === 9) {
e.preventDefault();
e.stopPropagation();
document.getElementById("taEditor").value += "\t";
}
getcursorpos();
//do various stuff after the textarea changes like: get value, get cursor pos etc
setTimeout(function() {
var taValueAfter = document.getElementById("taEditor").value;
getcursorpos();
if (taValueAfter !== taValueBefore) {
paginate(); //this function paginates the text in the textarea and sets the cursor
//paginate() takes about 20 milliseconds
}
if (doAgain.repeat) {
var lastEvent = doAgain;
doAgain.repeat = false;
document.getElementById("debug").innerHTML += "rerun: " + lastEvent.ctx.id + ":" + lastEvent.e.type + "<br>";
setTimeout(processUserInput.bind(lastEvent.ctx), 0, lastEvent.e);
}
document.getElementById("debug").innerHTML += e.type + "<br>";
IsProcessingEvent = false;
}, 0);
} else {
//save context and event
document.getElementById("debug").innerHTML += "isprocessing: " + e.type + "<br>";
doAgain = {
ctx: this,
e: e,
repeat: true
};
//i need to preventdefault here, because processUerInput also processes the TAB key and if i don't use preventdefault then the cursor will move focus to other elements during the pagination
e.preventDefault();
e.stopPropagation();
return false;
}
}
var doAgain = {
ctx: "",
e: "",
repeat: false
};
function getcursorpos() {
//for simplicity reasons it's empty
}
function paginate() {
var i = 0;
var k = 0;
//simulate 20-30 milliseconds of delay for pagination
for (i=0;i<100000000;i++) {
k++;
}
//for simplicity reasons it's empty
}
jsfiddle:
http://jsfiddle.net/63pkE/1/
要重现问题:尝试在文本区域中ctrl-v。
我不明白我做错了什么。
编辑
这里是一个新的JSFIDLE,我在其中替换了
setTimeout(processUserInput.bind(lastEvent.ctx), 0, lastEvent.e);
符合
setTimeout(function() {
processUserInput.call(lastEvent.ctx, lastEvent.e);
}, 0);
因为. bind
不是跨浏览器的,它仍然不能工作。
http://jsfiddle.net/63pkE/2/
试试这个,看看是否有效,我没有注意到你原来的代码行为和现在的复制粘贴工作有什么不同。
function processUserInput(e) {
if(!IsProcessingEvent) {
if(!e.ctrlKey){
IsProcessingEvent = true;
}
//Rest of the code
e.ctrl键返回true如果Ctrl键被按下。