JS onChange isn't fired if interval is at under a minute

Question

I'm using the onChange attribute to flip a global variable to true. The page will then refresh if the global variable unfinished is false. If it's true, it should just show an alert. This works 90% of the time. On a few cases where the interval is at less than a minute, the unfinished variable will be ignored and the page will refresh anyway.

Is there a better and less hack-job way of achieving a way to block page refreshes? Basically it looks to me like onChange isn't firing if my interval is at less than 1 minute.

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>";
}

Not related: `setInterval('countdown()',60000)` should be `setInterval(countdown,60000)`. — Derek 朕會功夫, Oct 01 '14 at 21:25
@Derek朕會功夫 this changes makes the abode code to work, so it is related — Tasos K., Oct 01 '14 at 21:26
OnChange does not detect a key up nor pasting from the context menu. OnkeyUp will detect a key press though what if they don't actually change anything in the field? Also OnKeyUp will not detect a change from pasting using the context menu. You may need a string variable to compare against when a change actually occurs. — BrightIntelDusk, Oct 01 '14 at 21:46
See my answer below as I have recommended to use input and onpropertychange. I have tested these with good success both in typing and pasting from the context menu. — BrightIntelDusk, Oct 01 '14 at 21:49
In addition I've added to my answer below an example of a check that the field has actually been changed. — BrightIntelDusk, Oct 01 '14 at 21:55
I revised my answer with one minor flaw of the initial value being added to the textString variable. It needed the .value when assigning the value for textString so that it would do the proper comparison. — BrightIntelDusk, Nov 14 '14 at 21:58

Tyr · Answer 1 · 2014-10-01T21:35:22.243

0

The onchange event isn't fired if your textarea field holds the focus. Use onkeyup instead to execute the blockRefresh function immidiately.

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.');
}

edited Oct 01 '14 at 21:35

answered Oct 01 '14 at 21:30

Tyr

2,810
1
12
21

OnKeyUp will not detect a change when pasting using the context menu. – BrightIntelDusk Oct 01 '14 at 21:48
What happens when a user presses the arrow key or any other key that does not actually change the text field. There are false positive results when using this solution to his problem. – BrightIntelDusk Oct 01 '14 at 21:58

score 0 · Accepted Answer · edited May 23 '17 at 12:21

After some reading of this Textarea onchange detection and testing of the answers I think the best answer is to use a combination of the input and onpropertychange events.

In addition the user could press a key that doesn't actually change anything in the field you will need to get the value of the text field when the page first loads. When a change occurs compare the current value against that value.

(See code below)

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

This will detect pasting from the context menu and work in IE in addition to most other browsers.

JS onChange isn't fired if interval is at under a minute

2 Answers2