Question

我正在使用onChange属性将全局变量翻转为true。如果全局变量unfinished为false，则页面将刷新。如果是真的，它应该只显示警报。这有效率的90％。在间隔小于一分钟的少数情况下，unfinished变量将被忽略，页面仍会刷新。

是否有更好的，更少的黑客工作方式来实现阻止页面刷新的方法？基本上它看起来像onChange如果我的间隔不到1分钟就不会发射。

HTML

<textarea name="comment" id="thecommentbox" style="width: 100%;" onChange="blockRefresh();"  class="thecommentbox form-control" style="height: 70px;" placeholder="Comment."></textarea>

JS

var unfinished = false;
function blockRefresh() {
    unfinished = true;
    document.getElementById('refreshBlocked').style.display = 'inline'; 
    console.log('Refresh blocked.');
}
setTimeout(function(){
    if(unfinished) {
        alert("unfinished comment");
    }
    else {
        window.location = window.location.pathname;
    }
}, 600000); //ten minutes is 600,000
var timeRemaining = 600000;
var timer = setInterval('countdown()',60000);
function countdown() {
    timeRemaining -= 60000;
    document.getElementById('refreshTimer').innerHTML = "<strong>" + timeRemaining/60000 + "</strong>";
}

Answer 1

如果您的textarea字段保持焦点，则不会触发onchange事件。使用onkeyup代替立即执行blockRefresh函数。

var unfinished = false;
var timer = setTimeout(function(){
    if(window.unfinished) {
        alert("unfinished comment");
    }
    else {
        window.location = window.location.pathname;
    }
}, 6000);

function blockRefresh() {
    window.unfinished = true;
    console.log('Refresh blocked.');
}

Answer 2

在阅读了这个Textarea onchange detection并测试答案后，我认为最好的答案是使用输入和onpropertychange事件的组合。

此外，用户可以按下一个键，该键实际上不会更改页面首次加载时获取文本字段值所需的字段中的任何内容。发生更改时，将当前值与该值进行比较。

（见下面的代码）

var unfinished = false;
var textString = document.getElementById("thecommentbox").value;
function blockRefresh() {
    if (textString != this.value) {
        window.unfinished = true;
        console.log('Refresh blocked.');
    }
}

var txtBox = document.getElementById('thecommentbox');
if (txtBox.addEventListener) {
  txtBox.addEventListener('input', blockRefresh, false);
} else if (txtBox.attachEvent) {
  txtBox.attachEvent('onpropertychange', blockRefresh);
}

除了大多数其他浏览器之外，这将检测上下文菜单中的粘贴并在IE中工作。

如果间隔时间不到一分钟，则不会触发JS onChange

2 个答案: