CODEWITHSUNDEEP
javascripteventsdomreturnkeyboard-shortcuts
Osi
Osi

Reputation: 1

Vanilla JS: Totally disabling a "save" functionality in webpages

Assume I'm a junior Wikipedia user that just want to experiment with changing some wikipedian content with the Wiki text editor in an edit-page, but not saving my changes in any way (not even by mistake), thus seeking a way to prevent any saving functionality in an edit-page, via vanilla JavaScript.

If I go for some edit-page in Hebrew Wikipedia I can save or publish a page by mouse-clinking the Save page button (illustration), which I can remove from DOM with:

document.querySelector("#wpSave").remove();

But let's assume I can still save or publish content by alt+shift+s and I'd like to prevent this possible saving behavior as well; I tried the following code for that:

// ==UserScript==
// @name         wiki
// @match        https://*.wikipedia.org/*
// ==/UserScript==

document.addEventListener("DOMContentLoaded", ()=>{
    document.addEventListener('keypress', function(e) {
        if (e.key == 16 && e.key == 18 && e.key == 83) {
            return false;
        }
    });
});

The code failed (no special error is given in console). Why it failed?

Upvotes: 1

Views: 208

Answers (4)

asynts
asynts

Reputation: 2423

There are a number of problems in your question:

  • event.key isn't the same as event.keyCode, Refer to the documentation.
  • e.key == 16 && e.key == 18 && e.key == 83 will never be true.
  • Returning false from an event listener doesn't stop the event from being propagated.

What you are trying to do can be achieved in the following way:

document.addEventListener("keypress", evt => {
  // refer to https://stackoverflow.com/a/2878005/8746648
  if(evt.altKey && evt.key == "S") {
    alert("prevent this message");
    evt.preventDefault();
  }
});

// refer to https://stackoverflow.com/a/35611393/8746648
document.addEventListener("keypress", evt => {
  if(evt.altKey && evt.key == "S") {
    evt.stopPropagation();
  }
}, true);

  1. Notice the true in the second event listener.
  2. Notice that evt.key is compared with an upper case "s".
  3. You can't prevent an event listener from running if it's registered in the capturing phase. (read about the capture and blobbing phases here).

Upvotes: 1

Hassan Sadeghi
Hassan Sadeghi

Reputation: 1326

If you can to know which method is called after clicking the save button, the way below can be helpful:

My suggested way is pressing f12 and then clicking on the save button to find the save method. Now, after finishing dom loading (in your code), you must replace gained function with an empty function like this:

FOUNDEDSaveFunc = function(){};

If clicking on the save button leads to refresh, you can gain that called action with some apps like fiddler (instead of pressing f12).

Also, document.addEventListener adds new listener to current existing listeneres. Because this, the main function that handles keypress, and your added function, will run both (the original save function still will call in this case).

Upvotes: 0

Randy Casburn
Randy Casburn

Reputation: 14165

The keyCodes all represent modifier keys. The keypress event does not fire with these keys:

    document.addEventListener('keypress', function(e) {
    console.log('keypress worked');
    });

    document.addEventListener('keyup', function(e) {
    console.log('keyup worked');
    });

Also, please note that .keyCode is deprecated. Should use .key

Upvotes: 1

Roberto Kedmenec
Roberto Kedmenec

Reputation: 324

Onclick you could prevent the default action.

document.addEventListener('keypress', function(e) {
    if (event.keyCode == 16 && event.keyCode == 18 && event.keyCode == 83) {
           e.preventDefault();
    }
});

Upvotes: -1

Related Questions