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

addEventListener/attachEvent, why doesn't this work?

P: n/a
Hello,

I'm having some problems with creating a script that works on both
Mozilla browsers as IE.

I want to change the background color of textareas and input text
fields as soon as somebody has entered something in them.

The script below works perfectly in mozilla browsers (netscape 7,
firefox 1,...) but doesn't in internet explorer (but it gives no
errors)

Any ideas why the attachEvent doesn't work?

I've pasted the script below.

thank you,
Bert

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>Problem</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script type="text/javascript">
var pressedkey='';
document.onkeypress =
function (evt) {
pressedkey = document.layers ? evt.which
: document.all ? event.keyCode
: evt.keyCode;
return true;
};

function notify_change() {
//prevent TAB key from changing background
if(pressedkey != 9)
this.style.background='#FFC';
}
</script>
</head>
<body>
<form name="simplified_form" method="post" action="#">
<textarea name="ggg_id5" id="ggg_id5" cols="100" rows="3">Change
this</textarea><br/>
<input type="text" name="hhh_id9" id="hhh_id9" size="16" value="Value
1" /><br/>
<input type="text" name="hhh_id10" id="hhh_id10" size="16"
value="Value 2" />
<div align="center"><input type="reset"><input type="submit"></div>
</form>

<script language="JavaScript" type="text/JavaScript">
var inputs = document.getElementsByTagName("INPUT");
var textareas = document.getElementsByTagName("TEXTAREA");
for (i = 0; i < textareas.length; i++) {
if(textareas[i].addEventListener) {
textareas[i].addEventListener("keyup",
notify_change, false);
} else { //Internet explorer
textareas[i].attachEvent("keyup",
notify_change);
}
}
for (i = 0; i < inputs.length; i++) {
if(inputs[i].addEventListener ) {
inputs[i].addEventListener("keyup",
notify_change, false);
} else { //Internet explorer
inputs[i].attachEvent("keyup", notify_change);
}
}
</script>
</body>
</html>
Dec 20 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
VK
<FAQENTRY>
addEventListener method requires event names in dis-on'ed form:

addEventListener("keypress", myFunction, false);

attachEvent method requires event names in on'ed form:

attachEvent("onkeypress", myFunction);
</FAQENTRY>

Also not that you're asking for troubles by scripting DOM object from
"immediate execution" script in the document body. More complex
document - higher the chances that the relevant DON objects will not be
ready for scripting (interactive) despite they are above the script in
the document flow.

You should always use window.onload to prepare the document.

Dec 20 '05 #2

P: n/a


Bert wrote:
function notify_change() {
//prevent TAB key from changing background
if(pressedkey != 9)
this.style.background='#FFC';
} inputs[i].attachEvent("keyup", notify_change);


In IE's event model if you use attachEvent and then when the function
(e.g. notify_change) passed to attachEvent is called the this object is
not set to the object the attachEvent has been called on.
Thus you attempts above to script
this.style.background
do not find any element node as you probably want. The this object whe
notify_change is called is simply the global object, the window object.
You would need to access e.g.
window.event.srcElement
in IE's object model to access an element node.

Furthermore attachEvent as the first argument wants what MS/IE
understands to be the event name and that is 'oneventname' e.g.
'onkeyup' and not 'keyup'.

I have not checked whether your other code setting that pressedkey
variable for instance make any sense when it comes to cross browser key
event handling.

--

Martin Honnen
http://JavaScript.FAQTs.com/
Dec 20 '05 #3

P: n/a
On Tue, 20 Dec 2005 13:27:36 +0100, Martin Honnen <ma*******@yahoo.de>
wrote:
Bert wrote:
function notify_change() {
//prevent TAB key from changing background
if(pressedkey != 9)
this.style.background='#FFC';
}
inputs[i].attachEvent("keyup", notify_change);


In IE's event model if you use attachEvent and then when the function
(e.g. notify_change) passed to attachEvent is called the this object is
not set to the object the attachEvent has been called on.

[...]You would need to access e.g.
window.event.srcElement
in IE's object model to access an element node.
I will give this a try.

Furthermore attachEvent as the first argument wants what MS/IE
understands to be the event name and that is 'oneventname' e.g.
'onkeyup' and not 'keyup'.
OK :)
I have not checked whether your other code setting that pressedkey
variable for instance make any sense when it comes to cross browser key
event handling.


that was a quick hack, this code still needs some cleaning.

Thank you for your tips!
B.

Dec 20 '05 #4

P: n/a
On 20 Dec 2005 04:12:22 -0800, "VK" <sc**********@yahoo.com> wrote:
<FAQENTRY>
addEventListener method requires event names in dis-on'ed form:

addEventListener("keypress", myFunction, false);

attachEvent method requires event names in on'ed form:

attachEvent("onkeypress", myFunction);
</FAQENTRY>
Also not that you're asking for troubles by scripting DOM object from
"immediate execution" script in the document body. More complex
document - higher the chances that the relevant DON objects will not be
ready for scripting (interactive) despite they are above the script in
the document flow.

You should always use window.onload to prepare the document.


I've changed the script to use an onload.
Thanks,
B.
Dec 20 '05 #5

P: n/a
VK wrote:
You should always use window.onload to prepare the document.


No, you should use the `onload' attribute or `load' event, for
`window.onload' is proprietary.
PointedEars
Dec 20 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.