addEventListener/attachEvent, why doesn't this work?

B

Bert

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.addEventListener) {
textareas.addEventListener("keyup",
notify_change, false);
} else { //Internet explorer
textareas.attachEvent("keyup",
notify_change);
}
}
for (i = 0; i < inputs.length; i++) {
if(inputs.addEventListener ) {
inputs.addEventListener("keyup",
notify_change, false);
} else { //Internet explorer
inputs.attachEvent("keyup", notify_change);
}
}
</script>
</body>
</html>
 
V

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.
 
M

Martin Honnen

Bert said:
function notify_change() {
//prevent TAB key from changing background
if(pressedkey != 9)
this.style.background='#FFC';
}
inputs.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.
 
B

Bert

Bert said:
function notify_change() {
//prevent TAB key from changing background
if(pressedkey != 9)
this.style.background='#FFC';
}
inputs.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.
 
B

Bert

<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.
 
T

Thomas 'PointedEars' Lahn

VK said:
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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,754
Messages
2,569,529
Members
45,001
Latest member
Kendra00E1

Latest Threads

Top