Re: Help needed with capturing key events in Firefox

Hi, answering my own post now. I got a little further since I wrote this,
and I think I have something now that works.

In the header:

<script type="text/javascript">
function killReturn(evt) {
var mytarget;
var keyCode;
var is_ie;
if (document.all) {
keyCode = event.keyCode;
mytarget = window.event.srcElement.type;
is_ie = true;
}
else if (document.addEventListener) {
// Firefox
mytarget = evt.target.type;
keyCode = evt.keyCode;
is_ie = false;
} else {
// Need to add a default or other browser cases here.
return true; // Just give up and exit for now.
}
if ((keyCode != 13) & (keyCode != 8)) { return true;}
switch (mytarget)
{
case 'textarea':
return true;
case 'text':
if (keyCode == 13) {
if (!is_ie) {
evt.preventDefault();
evt.stopPropagation();
}
return false;
}
return true;
default:
if (!is_ie) {
evt.preventDefault();
evt.stopPropagation();
}
return false;
}

}
</script>
</head>

and at the end of the document:

<script>
function addEvent(obj, evType, fn, useCapture) {
if (obj.addEventListener) {
obj.addEventListener(evType, fn, useCapture);
return true;
} else if (obj.attachEvent) {
var r = obj.attachEvent("on" + evType, fn);
return r;
} else {
alert("handler could not be attached");
}
}
addEvent(document,"keypress",killReturn,true);
</script>

Seems to work for both IE and Firefox, which is what I need for now. Found
how to do this on various internet tutorial and example sites, and took a
while to get it to work.

Any tips on what might still be wrong with this, or how to do it better
would be appreciated!

/Steve

On Wed, 05 Jan 2005 14:50:41 +0100, coolsti <coo (AT) nospam (DOT) com> wrote:

[snip]

When posting code to Usenet, please indent by two characters only (four at
the most). Newsreaders should wrap at less eighty characters and eight
character indents are likely to result in mangled formatting. Tabs are
also out of the question.

function killReturn(evt) {
var mytarget;
var keyCode;
var is_ie;
if (document.all) {

The document.all collection is not unique to Internet Explorer so you
cannot use it to infer the user agent currently in use. You don't need to
anyway: you're looking for support of specific features, so test for them.

function killReturn(evt) {evt = evt || event;
var target = evt.target || evt.srcElement,
keyCode = evt.keyCode || evt.which;

/* ... */
}

The logical OR (||) operator evaluates the first operand as a boolean. If
true, it returns the first operand itself. If false, the second operand it
returned regardless. It's a shorter way of writing

/* For a = b || c; */
if(b) {
a = b;
} else {
a = c;
}

or

a = b ? b : c;

[snip]

if (!is_ie) {
evt.preventDefault();
evt.stopPropagation();
}

Again, the proper test would be

if(evt.preventDefault && evt.stopPropagation) {

however I doubt stopPropagation is required here...

return false;

....and perhaps even returning false on its own will suffice.

[snip]

} else {
alert("handler could not be attached");
}

The third approach is to use the intrinsic event properties:

obj['on + evType] = fn;

[snip]

Hope that helps,
Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

When posting code to Usenet, please indent by two characters only (four at
the most). Newsreaders should wrap at less eighty characters and eight
character indents are likely to result in mangled formatting. Tabs are
also out of the question.

Mike,

Thanks for the tip! I am working with the PAM newsreader and I just cut
and pasted the code from my VI editor window without thinking about it.
Therefore the very large indentation.

And thanks for the coding tips. I am somewhat new to Javascript and what I
have picked up (as I needed it) was strictly only valid for IE. So your
post has taught me some things that I haven't come across yet.

Regards,
Steve, Denmark

Hi,

thanks again to Mike for the tips. Here is the result that seems to work
fine for IE and Firefox. The application is used within my company, so
the needs are specific, the users are limited. The problem was that
accidentally hitting the Return or Backspace key when not in a text or
textarea input field would cause an unwanted navigation away from the
page, losing all data that was already inputted. This solves the problem
by deactivating these two keys.

Just before the </head> tag:

<script type="text/javascript">
function killReturn(evt) {
var target = evt.target || evt.srcElement,
keyCode = evt.keyCode || evt.which;
var targtype = target.type;
if ((keyCode != 13) & (keyCode != 8)) { return true;}
switch (targtype)
{
case 'textarea':
return true;
case 'text':
if (keyCode == 13) {
window.status = 'Please do not use the return key,
click on a button instead';
if (evt.preventDefault) {
evt.preventDefault();
evt.stopPropagation();
}
return false;
}
return true;
default:
window.status = 'Backspace and return buttons have
been disabled to stop navigation away from this page';
if (evt.preventDefault) {
evt.preventDefault();
evt.stopPropagation();
}
return false;
}
}
</script>

And just before the </body> tag:

<script>
function addEvent(obj, evType, fn, useCapture) {
// General function for adding an event listener
if (obj.addEventListener) {
obj.addEventListener(evType, fn, useCapture);
return true;
} else if (obj.attachEvent) {
var r = obj.attachEvent("on" + evType, fn);
return r;
} else {
alert("handler could not be attached");
}
}
function addKeyEvent() {
// Specific function for this situation
var e = (document.addEventListener) ? 'keypress' : 'keydown';
addEvent(document,e,killReturn,false);
}
addKeyEvent();
</script>

Note that in the function addKeyEvent it is necessary to adjust which
event gets listened to according to the browser in order for the behavior
to be correct for the Backspace key: for IE it is keydown, and for Firefox
it is keypress. Using keydown for Firefox or keypress for IE causes navigation
away from the page before the killReturn function is called.

Steve, Denmark