Javascript – how to capture all changes to the contents of a element in JS

domeventsgmailiframejavascript

I am trying to write an extension for Google Chrome. I want to capture any keyboard input on a given page, and do something magic to it. I am able to do most of what I need with these lines:

document.addEventListener("keydown", function(event) { OnKeyDown(event); }, false);
document.addEventListener("keyup", function(event) { OnKeyDown(event); }, false);
document.addEventListener("keypress", function(event) { OnKeyPress(event); }, false);`

This works in most places, except for Google Mail. I am not getting these events when typing into the body of an email, because as it turns out, it's actually a <body> element, inside an <iframe>.

Best Answer

If you want to create trojan, you would better use C++, otherwise, reconcider your project/task. If project needs intercepting of all user input events in browser using JavaScript, then something is completely wrong with this project.

Related Solutions

Javascript – How to detect a click outside an element

Note: Using stopPropagation is something that should be avoided as it breaks normal event flow in the DOM. See this CSS Tricks article for more information. Consider using this method instead.

Attach a click event to the document body which closes the window. Attach a separate click event to the container which stops propagation to the document body.

$(window).click(function() {
  //Hide the menus if visible
});

$('#menucontainer').click(function(event){
  event.stopPropagation();
});

Javascript – How to check if an element is hidden in jQuery

Since the question refers to a single element, this code might be more suitable:

// Checks CSS content for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");

// The same works with hidden
$(element).is(":hidden");

It is the same as twernt's suggestion, but applied to a single element; and it matches the algorithm recommended in the jQuery FAQ.

We use jQuery's is() to check the selected element with another element, selector or any jQuery object. This method traverses along the DOM elements to find a match, which satisfies the passed parameter. It will return true if there is a match, otherwise return false.

Best Answer

Related Solutions

Javascript – How to detect a click outside an element

Javascript – How to check if an element is hidden in jQuery

Related Topic