Re: event handler in <body> doesn't work

#11

On Nov 4, 12:45 am, David Mark <dmark.cins... (AT) gmail (DOT) com> wrote:

Quote:

According to the MSDN documentation about 'DHTML Events' (http://
msdn.microsoft.com/en-us/library/ms533051(VS.85).aspx), the
'onkeydown' event is the way to go for IE (as of IE 5), because:

a) As of IE 5,
* 'onkeydown' event can be cancelled for the BACKSPACE key by
specifying event.returnValue = false;
* 'onkeyup' event cannot be cancelled, although it fires for the
BACKSPACE key;

Isn't that something. Makes you wonder what MS has against the BS
key. Maybe they are trying to make it hard to break.

b) As of IE 4,
* 'onkeypress' event fires and can be canceled for the alphanumeric
keyboard keys (Letters: A - Z (uppercase and lowercase); Numerals: 0 -
9;
Symbols: ! @ # $ % ^ & * ( ) _ - + = < [ ] { } , . / ? \ | ' ` " ~;
and some System keys (ESC, SPACEBAR, ENTER). Notice that BACKSPACE is
not listed.

Well, that likely means that IE4 is the same story. FWIW, that's good
news.

In addition, I've carried out some tests with the following results:
a) document.onkeyup doesn't work (obstruct 'Backspace key') for IE8,

No change there.

FF3, Safari 3 and Opera 9.64;
b) document.onkeypress doesn't work for Safari 3 and IE 8, but it
works for FF3 and Opera 9.64;

We know about IE. Additionally Safari 3 won't let you cancel
onkeypress with document and DOM0.

c) document.onkeydown doesn't work for FF3 and Opera 9.64, but it
works for Safari 3 and IE 8.

Again, we know about IE. What do you mean onkeydown "doesn't work"
for FF3?

Regardless, the keydown event is not normally used for this. Granted,
the original request doesn't require any action except to cancel the
default action, so that is a bit of a moot point.

So it's possible to solve the problem by referencing the listener
(disableBackspace) in both document.onkeypress (FF3 and Opera 9.64)
and document.onkeydown (okay for Safari 3 and IE 8) as below:

[snip]

Or something like this:-

var bsKeyEventType;
var myBSCallback = function() {
//console.log('Event type: ' + bsKeyEventType);

};

document.onkeydown = document.onkeypress = document.onkeyup = function
(evt) {
evt = evt || window.event;
var key = evt.which || evt.keyCode;

if (key == 8) {
switch (evt.type) {
case 'keydown':
if (!bsKeyEventType) {
bsKeyEventType = 'keydown';
document.onkeypress = null;
}
break;
case 'keypress':
if (!bsKeyEventType) {
bsKeyEventType = 'keypress';
document.onkeydown = null;
document.onkeyup = null;
}
myBSCallback();
break;
case 'keyup':
if (!bsKeyEventType) {
bsKeyEventType = 'keyup';
document.onkeydown = null;
document.onkeypress = null;
}
myBSCallback();
}
return false;
}

};

Did you test your example with IE8 and FF3 and Safari 3 and Opera
9.64???? Sorry to tell you this, but your code doesn't work as
expected on all the four browsers mentioned.

Unfortunately, in this situation, events are mutually excludent
depending on the browser in use; in other words:

* If we're using FF3 and Opera 9.64, then the BS key must be blocked
only by document.onkeypress;

* If we're using IE8 and Safari, then the BS key must be blocked only
by document.onkeydown.

If we try a different thing, then the BS key will not be blocked as
expected.

I'm inclined to think that this is a case where browser sniffing might
be necessary, in order to choose the correct document's event to
attach our listener to. I've tested the following code successfully on
the 4 browsers listed above:

window.onload = function () {
var browser = {
"opera": (/opera/i.test(navigator.userAgent)),
"mozilla": (/mozilla/i.test(navigator.userAgent) && !(/
(compatible|webkit)/i.test(navigator.userAgent))),
};
if (browser.mozilla || browser.opera) { // keypress works fine for
FF3 and Opera 9.64
document.onkeypress = disableBackspace;
} else { // keydown works well for Safari 3 and IE 8.
document.onkeydown = disableBackspace;
}
};

function disableBackspace(e) {
e = e || window.event;
var keynum = e.which || e.keyCode;
if (keynum === 8) {
window.alert("Backspace pressed. keyCode = " +keynum);
return false;
}
}

PS.: I know browser sniffing isn't a good practice in JavaScript, but
we must concur that blocking the backspace key in different browsers'
document isn't an usual task too.

Cheers,
JR

#12

On Nov 4, 8:44*pm, JR <groups_j... (AT) yahoo (DOT) com.br> wrote:

Quote:

On Nov 4, 12:45 am, David Mark <dmark.cins... (AT) gmail (DOT) com> wrote:

According to the MSDN documentation about 'DHTML Events' (http://
msdn.microsoft.com/en-us/library/ms533051(VS.85).aspx), the
'onkeydown' event is the way to go for IE (as of IE 5), because:

a) As of IE 5,
* 'onkeydown' event can be cancelled for the BACKSPACE key by
specifying event.returnValue = false;
* 'onkeyup' event cannot be cancelled, although it fires for the
BACKSPACE key;

Isn't that something. *Makes you wonder what MS has against the BS
key. *Maybe they are trying to make it hard to break.

b) As of IE 4,
* 'onkeypress' event fires and can be canceled for the alphanumeric
keyboard keys (Letters: A - Z (uppercase and lowercase); Numerals: 0 -
9;
Symbols: ! @ # $ % ^ & * ( ) _ - + = < [ ] { } , . / ? \ | ' ` " ~;
and some System keys (ESC, SPACEBAR, ENTER). Notice that BACKSPACE is
not listed.

Well, that likely means that IE4 is the same story. *FWIW, that's good
news.

In addition, I've carried out some tests with the following results:
a) document.onkeyup doesn't work (obstruct 'Backspace key') for IE8,

No change there.

FF3, Safari 3 and Opera 9.64;
b) document.onkeypress doesn't work for Safari 3 and IE 8, but it
works for FF3 and Opera 9.64;

We know about IE. *Additionally Safari 3 won't let you cancel
onkeypress with document and DOM0.

c) document.onkeydown doesn't work for FF3 and Opera 9.64, but it
works for Safari 3 and IE 8.

Again, we know about IE. *What do you mean onkeydown "doesn't work"
for FF3?

Regardless, the keydown event is not normally used for this. *Granted,
the original request doesn't require any action except to cancel the
default action, so that is a bit of a moot point.

So it's possible to solve the problem by referencing the listener
(disableBackspace) in both document.onkeypress (FF3 and Opera 9.64)
and document.onkeydown (okay for Safari 3 and IE 8) as below:

[snip]

Or something like this:-

var bsKeyEventType;
var myBSCallback = function() {
* * * * //console.log('Event type: ' + bsKeyEventType);

};

document.onkeydown = document.onkeypress = document.onkeyup = function
(evt) {
* * * * evt = evt || window.event;
* * * * var key = evt.which || evt.keyCode;

* * * * if (key == 8) {
* * * * * * * * switch (evt.type) {
* * * * * * * * case 'keydown':
* * * * * * * * * * * * if (!bsKeyEventType) {
* * * * * * * * * * * * * * * * bsKeyEventType = 'keydown';
* * * * * * * * * * * * * * * * document.onkeypress = null;
* * * * * * * * * * * * }
* * * * * * * * * * * * break;
* * * * * * * * case 'keypress':
* * * * * * * * * * * * if (!bsKeyEventType) {
* * * * * * * * * * * * * * * * bsKeyEventType = 'keypress';
* * * * * * * * * * * * * * * * document.onkeydown = null;
* * * * * * * * * * * * * * * * document.onkeyup = null;
* * * * * * * * * * * * }
* * * * * * * * * * * * myBSCallback();
* * * * * * * * * * * * break;
* * * * * * * * case 'keyup':
* * * * * * * * * * * * if (!bsKeyEventType) {
* * * * * * * * * * * * * * * * bsKeyEventType = 'keyup';
* * * * * * * * * * * * * * * * document.onkeydown = null;
* * * * * * * * * * * * * * * * document.onkeypress = null;
* * * * * * * * * * * * }
* * * * * * * * * * * * myBSCallback();
* * * * * * * * }
* * * * * * * * return false;
* * * * }

};

Did you test your example with IE8 and FF3 and Safari 3 and Opera
9.64???? Sorry to tell you this, but your code doesn't work as
expected on all the four browsers mentioned.

Certainly not. It was an example and may need adjustments. Certainly
it works in FF3 (3.5 actually), though.

Quote:

Unfortunately, in this situation, events are mutually excludent
depending on the browser in use; in other words:

Mutually exclusive? Not at all.

Quote:

* If we're using FF3 and Opera 9.64, then the BS key must be blocked
only by document.onkeypress;

That's not true (certainly not for FF3). And assuming your test
results for Opera 9 are correct, you can remove this line:-

document.onkeypress = null;

Then onkeypress will be canceled along with the others. As you don't
need the callback, no further adjustments are necessary.

Quote:

* If we're using IE8 and Safari, then the BS key must be blocked only
by document.onkeydown.

That doesn't make any sense. And certainly the code posted cancels
the default action for keydown (for all browsers).

Quote:

If we try a different thing, then the BS key will not be blocked as
expected.

What does that mean?

Quote:

I'm inclined to think that this is a case where browser sniffing might
be necessary, in order to choose the correct document's event to
attach our listener to. I've tested the following code successfully on
the 4 browsers listed above:

Nope. Can't go wrong with attaching to all of them. Extremely
trivial if you don't need a callback. A little more work if you do.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Re: event handler in <body> doesn't work

Javascript JavaScript language (comp.lang.javascript)

Re: event handler in <body> doesn't work - 11-04-2009 , 08:44 PM

Re: event handler in <body> doesn't work - 11-04-2009 , 09:02 PM