473,387 Members | 1,844 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,387 software developers and data experts.

Help needed with capturing key events in Firefox

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
3 10543
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Jay Xx | last post by:
I have an IFrame in design mode. I've tried a bunch of things to capture key presses in that IFrame, but I can't seem to get it. I can capture key presses outside the IFrame fine. I have this...
5
by: Mark Szlazak | last post by:
Apparently there is a textarea onscroll event bubbling bug in Firefox and Mozilla: https://bugzilla.mozilla.org/show_bug.cgi?id=229089 I'm trying to check for this bug with the following...
6
by: rich_poppleton | last post by:
Help.... I've got a textarea where people type in a description. However for certain reasons we need to stop them typing !$*^ . I have a solution this which works fine in IE: function...
10
by: Bharat | last post by:
Hi Folks, Suppose I have two link button on a page (say lnkBtn1 and lnkBtn2). On the click event of the lnkbtn1 I have to add a dynamically created control. And On the click event of the lnkBtn2 I...
5
by: Nick | last post by:
Hey guys, I have 2 events on a windows forms datagrid, the mouse move as well as the double click events. What's happening is that when I double click on a row in the grid, the mouse move event...
1
by: dlogan | last post by:
Since this is becoming a complete hack-job, I think its about time I asked for some help. I am trying to make a calendar using AJAX to allow for the main calendar to display, then load in the events...
0
by: gunimpi | last post by:
http://www.vbforums.com/showthread.php?p=2745431#post2745431 ******************************************************** VB6 OR VBA & Webbrowser DOM Tiny $50 Mini Project Programmer help wanted...
7
by: mavigozler | last post by:
IE7 does not appear to set an event on contained text inside SPAN elements whose 'onclick', 'onmouseover', and 'onmouseout' events, defying the HTML recommendation. Firefox appears to conform. ...
2
by: jdvictor | last post by:
Understandably I know that the real issue is in IE but at the moment everything looks good in IE and not Firefox. THE PROBLEM The problem that I am having is that my navigation menu is out of...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.