Help needed with capturing key events in Firefox

coolsti · Jan 5, 2005

Can someone help me enhance this code snippet which works only for IE so
that it will also work for Firefox? I have been trying all sorts of things
and have gotten to where I can capture the keydown and keypress events in
Firefox, but then I can't seem to get the key code. I also don't know if
the window.event.srcElement.type works with Firefox or if the
onkeydown="return false" is valid in Firefox.

I have this Javascript at the end of the header of my page, and it is a
function that should look at which key was pressed no matter where the
user is on the page. If the event was triggered by an input field of type
"text", the Enter key is deactivated. If the event is triggered by a
"textarea" input field, nothing is deactivated. In all other cases, both
the Enter and Backspace keys are deactivated.

<html><head>


<script type="text/javascript">
function killReturn(e) {
if ((e.keyCode != 13) & (e.keyCode != 8)) { return true;}
switch (window.event.srcElement.type) {
case 'textarea':
// Deactivate nothing
return true;
case 'text':
// Deactivate Enter key
if (e.keyCode == 13) {
return false;
}
return true;
default:
// Deactivate both Enter and Backspace keys
return false;
}
}
</script>
</head>
<body>
<form name="form1" method="post" onkeydown="return killReturn(event);"
action="<?php echo $_SERVER['PHP_SELF']; ?>">



As mentioned, the above works fine in Internet Explorer.
Thanks for any help!

Regards,
Steve, Denmark

coolsti · Jan 5, 2005

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

Michael Winter · Jan 5, 2005

[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

coolsti · Jan 5, 2005

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

coolsti · Jan 6, 2005

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

Problem with android and scrolling with <input textarea	5	May 18, 2022
Need help with this script	4	Mar 12, 2023
Help with Loop	0	Mar 30, 2023
autosuggest key events	0	Oct 8, 2008
Keypress function	0	Dec 19, 2022
Help with code	0	Jun 12, 2022
cancelling keydown event in designmode(rich text editing) in firefox	7	May 2, 2007
Need help , Having problem with Drag n Drop...	1	Dec 21, 2022

Help needed with capturing key events in Firefox

coolsti

coolsti

Michael Winter

coolsti

coolsti

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads