How to detect textarea or input type="text" editing?

Question

I use this snippet to prevent the user from accidentally navigating away from the editing page:

var warning = false;
window.onbeforeunload = function() {
  if (warning) {
    return '';
  }
}

Now I want to set the variable warning to be true if any of the textarea or input type="text" has been modified, I want to use the onkeyup event such as in:

document.getElementById('textarea_id').onkeyup = function() {
    warning = true;
}

But it's not working. Don't quite want to use jQuery on this. Any insights?

Update:

Changed to this:

var warning = false;
window.onbeforeunload = function() { 
  if (warning) {
    return 'You have unsaved changes.';
  }
}
document.getElementById('textarea_id').onkeyup = function() {
    warning = true;
}

Yet it's still not working.

By the way, it's put in in the of the page. There are no javascript anywhere else.

Answer 1

The return value of the onbeforeunload event is only used if it isn't equivalent to false.

Change return ''; to

return 'You have unsaved changes.';