Help needed with capturing key events in Firefox

**coolsti** · Jul 23 '05, 04:21 PM

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.sr cElement.type;
is_ie = true;
}
else if (document.addEv entListener) {
// 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.preventDefa ult();
evt.stopPropaga tion();
}
return false;
}
return true;
default:
if (!is_ie) {
evt.preventDefa ult();
evt.stopPropaga tion();
}
return false;
}

}
</script>
</head>

and at the end of the document:

<script>
function addEvent(obj, evType, fn, useCapture) {
if (obj.addEventLi stener) {
obj.addEventLis tener(evType, fn, useCapture);
return true;
} else if (obj.attachEven t) {
var r = obj.attachEvent ("on" + evType, fn);
return r;
} else {
alert("handler could not be attached");
}
}
addEvent(docume nt,"keypress",k illReturn,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** · Jul 23 '05, 04:21 PM

Re: Help needed with capturing key events in Firefox

On Wed, 05 Jan 2005 14:50:41 +0100, coolsti <coo@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.
[color=blue]
> function killReturn(evt) {
> var mytarget;
> var keyCode;
> var is_ie;
> if (document.all) {[/color]

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]
[color=blue]
> if (!is_ie) {
> evt.preventDefa ult();
> evt.stopPropaga tion();
> }[/color]

Again, the proper test would be

if(evt.preventD efault && evt.stopPropaga tion) {

however I doubt stopPropagation is required here...
[color=blue]
> return false;[/color]

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

[snip]
[color=blue]
> } else {
> alert("handler could not be attached");
> }[/color]

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.

**coolsti** · Jul 23 '05, 04:25 PM

Re: Help needed with capturing key events in Firefox

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.preventDef ault) {
evt.preventDefa ult();
evt.stopPropaga tion();
}
return false;
}
return true;
default:
window.status = 'Backspace and return buttons have
been disabled to stop navigation away from this page';
if (evt.preventDef ault) {
evt.preventDefa ult();
evt.stopPropaga tion();
}
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.addEventLi stener) {
obj.addEventLis tener(evType, fn, useCapture);
return true;
} else if (obj.attachEven t) {
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.addEv entListener) ? 'keypress' : 'keydown';
addEvent(docume nt,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

Help needed with capturing key events in Firefox

Help needed with capturing key events in Firefox

Comment

Comment

Comment