override existing onkeydown function - javascript

My extensions go through every input entered on an on any website that is loaded.
What I do is I consider every onkeydown and manipulate it if it has some value.
my background js file contains the following:
document.onkeydown = returnKey;
function returnKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ( node.value == 'fi' ) { evt.srcElement.value = "??"; }
}
My problem is when I have websites that already contains onkeydown function in their innerHTML webpage.
for instance:
taken from facebook's homepage:
<textarea class="uiTextareaAutogrow input" onkeydown="Bootloader.loadComponents(["control-textarea"], function() { TextAreaControl.getInstance(this) }.bind(this));
the switching of node.value == 'fi' in ?? is not executing since their onkeydown="Bootloader...runs before my document.onkeydown.
How do I cause my function to run before their onkeydown is executed?

Instead of document.onkeydown = returnKey;, use
document.addEventListener('keydown', returnKey, true);
The most important part of this line is the third argument. When the value of this parameter is true, the event listener is triggered at capturing phase, which cannot be prevented using event.preventDefault(); or event.stopPropagation();.

Related

Bind an event with onbeforeunload

I use the following code to prompt a message if the user close the page :
window.onbeforeunload = function(e) {
e = e ? e : window.event;
if(e) {
e.returnValue = '';
}
return '';
}
I would like to avoid the prompt this message shows when a user clicks a special link (let say id="myid") on the page. Is it possible? I tried like this:
var source = e.target || e.srcElement;
console.log(source);
But source is null, is it possible to bind the event and to check it with onbeforeunload?
and what are the "e" attributes ? how I can look into this "object" ? Any idea ?
Unbind the event if the link is clicked and then redirect
window.onbeforeunload = null;

Javascript ignore function

I am working on a site at work. It is a business application running on Spring MVC tiles with a Tomcat server. The real question is this. There is a function that is passed into each tile that ignores the enter key on the forms. Is there a short javascript function to ignore a javascript function(as fun as that sounds)? For exanmple, there is a create form where you should not be able to press enter but above the form is a search box where you should be able to press enter. One is navbar.jsp and other is create***********.jsp. I have spent a couple of hours doing research on here and doing the tried and true method of just trying anything but could not figure it out. It would be really great if I could override that function in the navbar.jsp for example and still run the function in the create form. Here is the StopRKey function:
function stopRKey(evt) {
// var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
// if ((evt.keyCode == 13) && (node.type=="text")) { return false; }
$(document).ready(function() {
$(window).keydown(function(event) {
if (event.keyCode == 13 && node.type=="text") {
event.preventDefault();
return false;
}
});
});
}
The first 3 lines are the old code. We recycled one of the lines into our new snippet

trying to understand some js codes from a site

Ev.DOMit = function (e) {
e = e ? e : window.event; // e IS passed when using attachEvent though ...
if (!e.target) {
e.target = e.srcElement;
}
if (!e.preventDefault) {
e.preventDefault = function () {
e.returnValue = false;
return false;
};
}
return e;
};
Ev.getTarget = function (e) {
e = Ev.DOMit(e);
var tgt = e.target;
if (tgt.nodeType !== 1) {
tgt = tgt.parentNode;
}
return tgt;
};
I saw above code from one js file
Questions:
1.
e.returnValue = false;
return false;
since we already have this line: e.returnValue = false;,why we need to have this line here: return false;?
2 .
if (tgt.nodeType !== 1) {
tgt = tgt.parentNode;
}
what is this line for?
The e.returnValue = false; sets the property returnValue of the function argument. The return false; method returns the function with the value of 'false'.
My guess is per this - http://www.w3schools.com/dom/dom_nodetype.asp - the function sets the tgt (return value) to the parentNode for any node except for ELEMENT_NODE
I am not sure about question 1 but I have some view on question 2.
"nodeType" represent the "integer" value of a node, element like "p, div"
will have node type 1 "this is text" will have node type of "3".
code:
if ( tgt.nodeType !== 1 ) {
tgt = tgt.parentNode;
}
I guess coder wants to handle the event on "element" like "p, div" tag.
Example:
Let say we have following html code
<p>Text in p</p>
So if some event occur on the text "Text in p" inside "p" then also coder want to get target element for the event as "p" not the text inside it "Text in p".
Now think an event of text node "DOMCharacterDataModified", when this event fire the target
element should be "Text in p" but our coder want the target element as "p" tag.
Again this is a view of mine may concrete answer to the question
One useful Links you may like to read
https://developer.mozilla.org/en-US/docs/Web/API/Node.nodeType
Thanks
Not necessary at all.
Make sure tgt is always an ElementNode, even if the event fires on a contained text node.

jquery stopPropagation() and sending "event"?

(jsbin)
I created a table with a button inside.
The Table has onclick event and also the inside Button
But when Im pressing the button ,the event bubbles up to the table. ( and I get 2 alerts)
So I used ev.stopPropagation();
And its working. But in order for it to work , I had to do :
in html :
<input type='button' onclick='doWork(event);'/>
in Js :
function doWork(ev)
{
ev.stopPropagation();
alert('button');
}
Is this the correct way ?
Must I send the event ? I know that different browsers uses differently the event .
IE doesn't require passing event object and we can access it using window.event. Old IE versions have not supported e.stopPropagation. So, for cross browser compatability reason, you should try this:
function doWork(e)
{
var evt = e || window.event;
if (evt.stopPropagation) {
evt.stopPropagation();
}
else {
evt.cancelBubble = true;
}
alert('button');
}
This is another way:
<table onclick="doWork();" border=2 style="width:70px;">
<input type='button' onclick='alert("button");'/>
function doWork(ev)
{
ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.tagName.toUpperCase() !== 'INPUT'){
alert('table');
}
}
I can't see anything wrong with this, and yes, you need to parametrise the event so you can call stopPropagation() on it in your event handler.

Remove onbeforeunload from JS execution in main window from frame

I tried to disable onbeforeunload event from frame script with this command:
window.parent.onbeforeunload = null;
but received this dialog:
I tried to debug and onbeforeunload becomes null. But how I can do so this dialog not shown?
For additional information, I need to trigger this event with JS. At start of the page I set:
window.parent.onbeforeunload = confirm;
where confirm is my own function. But in some places of code I need to disable this event and after that enable with the same command.
This could be happening because null is basically an object in Javascript. Here is how I had written it:
var confirmCloseFn = function(evt) {
if (!captureClose) return;
var message = getLogoffMsg();
evt = (evt) ? evt : window.event;
if(message) {
if (evt) evt.returnValue = message;
return message;
}
else {
if (evt) evt.returnValue = null;
return null;
}
};

Categories