Member Avatar for MDGM

Hi all,

I want to know if it is possible and how to intercept an existing javascript keybind and block it.

For example, a website has some javascript that, when the user hits the letter "H" on the keyboard, the website automatically runs a function, e.g. redirecting to another web page.

I want to block this functionality after it has been loaded into the page.

Is this possible? Perhaps the stoppropagation function? Or maybe simply re-assign the key event to just run an empty function?

Thanks,
Max.

  • 4 Contributors
  • 8 Replies
  • 324 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by Airshow

Dani AI

Generated

Short answer: don’t try to guess and remove the page’s handler (removeEventListener needs the original function). Intercept the keyboard event as early as possible and stop it before the page’s listener runs. For non-printable keys (Backspace) use the keydown phase, check the event target so editable fields still work, and call preventDefault + stopImmediatePropagation (with old-IE fallbacks) to block the action.

An example interceptor you can inject into the page (runs in the page context) — note this differs from the onkeypress/assignment examples already posted by :

(function(){
  function intercept(e){
    var t = e.target || e.srcElement;
    var key = e.key || e.keyCode || e.which;
    var editable = (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.isContentEditable);

    if (!editable && (key === 'Backspace' || key === 8 || String(key).toLowerCase() === 'h')){
      e.preventDefault && e.preventDefault();
      e.stopImmediatePropagation && e.stopImmediatePropagation();
      if (typeof e.returnValue !== 'undefined') e.returnValue = false;
      if (typeof e.cancelBubble !== 'undefined') e.cancelBubble = true;
    }
  }

  document.addEventListener('keydown', intercept, true);
})();

If the page registers listeners after your code runs, either inject early (before page scripts) or patch the registration function so new handlers are wrapped/ignored. For browser add-ons: remember content scripts may run in an isolated world (see ), so to change page JS you often must insert a script tag into the document so your overrides run in the page context. Overriding EventTarget.prototype.addEventListener lets you catch handlers the page adds and wrap them, but do this cautiously — it can break site logic.

Troubleshooting notes: keypress is unreliable for non-character keys, order of listeners follows registration order (so timing matters), and aggressive use of stopImmediatePropagation can interfere with accessibility or site functionality. Test thoroughly and allow keys when focus is in editable controls.

Recommended Answers

All 8 Replies

Member Avatar for hielo

If your page contains a frame, and THAT frame contains and EXTERNAL/REMOTE page that contains the javascript that is "listening" for the "H" keypress, then you will NOT be able to rebind the event. In other words, what you are trying to do is not possible. The security restrictions imposed by the browser will not give you access to the iframe content/objects if it is from a different domain.

Member Avatar for MDGM

Thanks for your reply,

The process does not involve any iFrames. I am going to use this in a browser add-on and so the javascript will be inserted directly into the page as if I was the developer of that website and just inserting code as normal.

Max

Member Avatar for hielo

then you will need to do so AFTER the page has loaded. To clarify, basically this is what needs to be done:

//assuming this is what is there initially
document.body.onkeypress=function(){
 //code that "listens" for "H"
 ...
};

then you need to override that listener after page load:

onload=function(){
 //assuming this is what is there initially
 document.body.onkeypress=function(){
  //YOUR function definition here.
  ...
 };
}
Member Avatar for MDGM

Iv had a go at that, the key I need to override is backspace but entering the backspace code (8) does not seem to work. How should that work?

Member Avatar for Airshow

.... browser add-on .....

?????

Member Avatar for sheva249

Thanks hielo for your post. It is really very appreciated.

Member Avatar for hielo 
Iv had a go at that, the key I need to override is backspace but entering the backspace code (8) does not seem to work. How should that work?

it will be better if you post what you have

: I suspect he's developing something similar to a Greasemonkey script/"extension"

Member Avatar for Airshow

Hielo,

@Airshow: I suspect he's developing something similar to a Greasemonkey script/"extension"

Aha! Thanks, this topic makes sense now.

Airshow

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.