473,574 Members | 2,271 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Javascript events: keydown, keyup and change are screwy

I thought this would be fairly straight forward but apparently it's not.
Given the following html file:

<!DOCTYPE html PUBLIC "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>Test</title>
</head>
<body>
<form method="post" action="javascr ipt:">
Type a key
<input
align = "right"
type = "text"
name = "field"
size = "8"
onkeydown = "alert ('keydown');"
onkeyup = "alert ('keyup');"
onchange = "alert ('change');"

</form>
</body>
</html>

Pretty simple. (Browse to http://defaria.com/test.html). What one would
expect is if a key was typed that the following alerts would occur:
keydown, keyup and when you leave the field you'd get a change. Not so
with the two major browsers (well I'm using FireFox and IE).

With Firefox I get the following (click on the text input box and type a
character):

* keyup! Why not keydown first!
* change! Why a change?!? I should only get a change when I leave
the field no?
* keydown! It's about time!

Now click anywhere outside the text field to "leave" the field and...
Nothing.

Now with IE (again click on text input bos and type a character):

* keydown - cool, what I expect
* Nothing! - Hmmm what happened to the keyup?!?

Now click anywhere outside the test field to "leave" the field and:

* change: OK that's expected but again what happened to the keydown?

Anybody have any ideas? Opinions?
--
Some people are like Slinkies . . not really good for anything, but you
still can't help but smile when you see one tumble down the stairs.

Jul 23 '05 #1
34 4891
> Anybody have any ideas? Opinions?

The problem is that when you do an alert, a seperate dialogwindow is
opened and the focus on the window handeling the events is lost. Somehow
this results in some weird behaviour. I modified your script a bit, and
now it does give the output you expect. I tested it in IE, NS7 and FireFox

<!DOCTYPE html PUBLIC "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>Test</title>
<script language="JavaS cript">

function debug(s) {
ta = document.getEle mentById("debug Area");
ta.value+=s+"\n ";
}

</script>
</head>
<body>
<form method="post" action="javascr ipt:">
Type a key
<input
align = "right"
type = "text"
name = "field"
size = "8"
onkeydown = "debug ('keydown');"
onkeyup = "debug ('keyup');"
onchange = "debug ('change');"

</form>
<textarea id="debugArea" readonly="true" cols="40" rows="20"></textarea>
</body>
</html>
Jul 23 '05 #2
Lee
Andrew DeFaria said:

This is a multi-part message in MIME format.
--------------020300050907030 309060809 Now with IE (again click on text input bos and type a character):<br>
<ul>
<li>keydown - cool, what I expect</li>
<li>Nothing! - Hmmm what happened to the keyup?!?</li>
</ul>
Now click anywhere outside the test field to "leave" the field and:<br>
<ul>
<li>change: OK that's expected but again what happened to the keydown?</li>
</ul>
Anybody have any ideas? Opinions?<br>

Please post plain text only to this newsgroup.

I don't have Firefox, but when testing in the two major browsers
I see the results you describe for IE.

Your text element never sees the keyup event because the alert
has taken focus before it happens. That's why the keydown
event is rarely useful.

Jul 23 '05 #3
"Andrew DeFaria" <An****@DeFaria .com> wrote in message
news:4a******** *************** ****@msgid.mega newsservers.com ...
I thought this would be fairly straight forward but apparently it's not.
Given the following html file:

<!DOCTYPE html PUBLIC "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>Test</title>
</head>
<body>
<form method="post" action="javascr ipt:">
Type a key
<input
align = "right"
type = "text"
name = "field"
size = "8"
onkeydown = "alert ('keydown');"
onkeyup = "alert ('keyup');"
onchange = "alert ('change');"
</form>
</body>
</html>

Pretty simple. (Browse to http://defaria.com/test.html). What one would
expect is if a key was typed that the following alerts would occur: keydown,
keyup and when you leave the field you'd get a change. Not so with the two
major browsers (well I'm using FireFox and IE).

With Firefox I get the following (click on the text input box and type a
character):

keyup! Why not keydown first!
change! Why a change?!? I should only get a change when I leave the field
no?
keydown! It's about time!
Now click anywhere outside the text field to "leave" the field and...
Nothing.

Now with IE (again click on text input bos and type a character):

keydown - cool, what I expect
Nothing! - Hmmm what happened to the keyup?!?
Now click anywhere outside the test field to "leave" the field and:

change: OK that's expected but again what happened to the keydown?
Anybody have any ideas? Opinions?
--
Some people are like Slinkies . . not really good for anything, but you
still can't help but smile when you see one tumble down the stairs.
Try changing "alert" to "windows.st atus +=":

<html>
<head>
<title>onkeys.h tm</title>
</head>
<body>
<form method="post" action="javascr ipt:">
Type a key
<input
align = "right"
type = "text"
name = "field"
size = "8"
onkeydown = "window.sta tus += ' keydown';"
onkeyup = "window.sta tus += ' keyup';"
onchange = "window.sta tus += ' change';"

</form>
</body>
</html>
Jul 23 '05 #4
DU
Andrew DeFaria wrote:
I thought this would be fairly straight forward but apparently it's not.
Given the following html file:

<!DOCTYPE html PUBLIC "-//w3c//dtd html 4.0 transitional//en">
Error: invalid formal public identifier -//w3c//dtd html 4.0
transitional//en: invalid public text class

W3C Quality Assurance
List of valid DTDs you can use in your document.
http://www.w3.org/QA/2002/04/valid-dtd-list.html

W3C Quality Assurance Tutorial
My Web site is standard! And yours?
http://www.w3.org/QA/2002/04/Web-Quality

Why Validate Your HTML
Creating Valid HTML Documents Means Cleaner Code and Easier Maintenance
http://webdesign.about.com/library/weekly/aa092799.htm
<html>
<head>
<title>Test</title>
</head>
<body>
<form method="post" action="javascr ipt:">
I'm surprised you can write
action="javascr ipt:"
just like that. Why not just
action=""
if you don't want to submit the form?
Type a key
<input
align = "right"
type = "text"
name = "field"
size = "8"
onkeydown = "alert ('keydown');"
As someone mentioned, creating an alert here is not wise.

KeyEvent:Proper ties (that demo can be improved)
http://www.din.or.jp/~hagi3/JavaScri...s/KeyEvent.htm
onkeyup = "alert ('keyup');"
onchange = "alert ('change');"
>

</form>
</body>
</html>

Pretty simple.


I recommend you always validate your markup code with a validator before
posting a question. All problems which will need to be corrected anyway
after testing with various user agents are related to validation errors.

DU
Jul 23 '05 #5
DU wrote:
Andrew DeFaria wrote:
I thought this would be fairly straight forward but apparently it's
not. Given the following html file:

<!DOCTYPE html PUBLIC "-//w3c//dtd html 4.0 transitional//en">
Error: invalid formal public identifier -//w3c//dtd html 4.0
transitional//en: invalid public text class


Well first off this was just a little test. I try to remain compliant in
more formal web pages. Of course, they make it so difficult...
W3C Quality Assurance
List of valid DTDs you can use in your document.
http://www.w3.org/QA/2002/04/valid-dtd-list.html
Interesting list, with no real information about which one I should use
and why! HTML 2.0? 3.2? 4.01? Strict? Transitional? Frameset? What about
XHMTL? Who knows! My guess would be HTML 4.01 Strict would be best for
me and I will endeavor to use that. But perhaps the reason why people
pay that much attention to such standards and validations is that they
are not easy to do and not explained very well.
W3C Quality Assurance Tutorial
My Web site is standard! And yours?
http://www.w3.org/QA/2002/04/Web-Quality
Interesting and yada, yada. Yes standards are important. Yes I try to
comply. Yes I will try harder.
Why Validate Your HTML
Creating Valid HTML Documents Means Cleaner Code and Easier Maintenance
http://webdesign.about.com/library/weekly/aa092799.htm
<html>
<head>
<title>Test</title>
</head>
<body>
<form method="post" action="javascr ipt:">
I'm surprised you can write action="javascr ipt:" just like that. Why
not just action="" if you don't want to submit the form?


I'm equally surprised that you can write action=""! IOW I think it's
largely irreverent to the issue at hand.
Type a key
<input
align = "right"
type = "text"
name = "field"
size = "8"
onkeydown = "alert ('keydown');"


As someone mentioned, creating an alert here is not wise.


Yes. I got that. And I understand why now.
KeyEvent:Proper ties (that demo can be improved)
http://www.din.or.jp/~hagi3/JavaScri...s/KeyEvent.htm


Thanks. But it was not a demo. It was a chopped down example of a
problem I was having.
onkeyup = "alert ('keyup');"
onchange = "alert ('change');"
>

</form>
</body>
</html>

Pretty simple.


I recommend you always validate your markup code with a validator
before posting a question. All problems which will need to be
corrected anyway after testing with various user agents are related to
validation errors.


Not so really here. The problem was the usage of alert! ;-)

--
Why do people point to their wrist when asking for the time, but not to
their crotch when they ask where the toilet is?
Jul 23 '05 #6
On Fri, 04 Jun 2004 20:12:29 -0700, Andrew DeFaria wrote:
I recommend you always validate your markup code with a validator
before posting a question. All problems which will need to be
corrected anyway after testing with various user agents are related to
validation errors.


Not so really here. The problem was the usage of alert! ;-)


I myself am limited to testing on IE6,
Moz1.3, NN 4.08, Lynx and Opera (all on XP).

I am *astounded* that you managed to test
you pages on even a small percentage of
the available UA's.

How do you do that?

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology
Jul 23 '05 #7
Andrew Thompson wrote:
On Fri, 04 Jun 2004 20:12:29 -0700, Andrew DeFaria wrote:
I recommend you always validate your markup code with a validator
before posting a question. All problems which will need to be
corrected anyway after testing with various user agents are related to
validation errors.
Not so really here. The problem was the usage of alert! ;-)


I myself am limited to testing on IE6, Moz1.3, NN 4.08, Lynx and
Opera (all on XP).

I am *astounded* that you managed to test you pages on even a small
percentage of the available UA's.


I'm confused! Where did I say I tested my pages on any UA's at all
really?!? Listen this is a system that I'm designing for me, not the
world, though I may eventually offer it up. As such I only really care
that it works on Mozilla (well I use Firefox but that's derivitive) and
perhaps IE (cause I'm currently limited to that at work). Still I will
give nod to standard compliance and I suspect that it will probably work
just find on the other brouwsers like Opera, et. al. In general I don't
go off an use esoteric, possibly browser specific functionality like
ActiveX, etc. And while I like Netscape I have no plans on trying to
support 4.08. Hell there's 6.0 and the 7.x series! I see above you
mention IE 6 but not IE 5. I see is similarly for Netscape.
How do you do that?


Um. I'd get you download and install them then run your pages through
them. I have XP and Linux at home so I can cover that angle if I want.
You could also ask friends that you know that might have access to other
OSes or browsers. But generally I think it's best to code for the
standards and then rely on standards compliances. Isn't that one reason
for standards?

--
If you mated a bulldog and a shitsu, would it be called a bullshit?

Jul 23 '05 #8
On Sat, 05 Jun 2004 09:25:00 -0700, Andrew DeFaria wrote:
But generally I think it's best to code for the
standards
Agree.
..and then rely on standards compliances.
Disagree.
..Isn't that one reason
for standards?


Well, 'standards' are a nice ideal,
and a wonderful *concept*... ;-)

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology
Jul 23 '05 #9
Andrew DeFaria wrote:
<snip>
I'm confused! ...

<snip>

| Content-Type: multipart/alternative;
| boundary="------------040701020404010 203020602"

Content types for posts to comp.lang.javas cript should be plain text
only.

Richard.
Jul 23 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
1935
by: Ramnadh | last post by:
Hi, I am inherting the Panel call and making another class BasePanel By extending all the properties and including some other members as the base for all the classes. After that i am inheriting that BasePanel Class. How can i register the KeyDown/KeyUp event. As the Protected Access specifier cannot be accessible to multilevel inheritance,...
6
1998
by: turnitup | last post by:
Dear all, I would like to implement a session timeout feature so that browsers are automatically logged out if there is no activity after a certain time. I know that this can be done with javascript or the meta tag. But I have a "sovereign" application written using AJAX which does not require a page refresh, but should continue to behave...
4
1893
by: m0nkeymafia | last post by:
I read about this technique to basically allow you to have a file with behaviours and javascript events that attach to various dom objects and events but are not done inline. so its basically a css file but for javascript. anyone know what it is called or where i can get more information about it?? thanks
2
19283
by: Tony Johansson | last post by:
Hello! I have created a Control that consist of a label and a textbox.I have called this class ctlLabelTextbox. public partial class ctlLabelTextbox : UserControl { .... } The class that I have created for this purpose is derived from class UserControl.
0
7831
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
8262
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
0
8129
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6497
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
0
5331
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3785
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
2258
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1364
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
1092
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

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.