By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,435 Members | 2,033 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,435 IT Pros & Developers. It's quick & easy.

Help needed with capturing key events in Firefox

P: n/a
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>
<!-- various header code here -->

<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']; ?>">

<!-- rest of html page from here ... -->

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

Regards,
Steve, Denmark
Jul 23 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
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

Jul 23 '05 #2

P: n/a
On Wed, 05 Jan 2005 14:50:41 +0100, coolsti <co*@nospam.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.
Jul 23 '05 #3

P: n/a
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
Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.