Javascript events: keydown, keyup and change are screwy

Andrew DeFaria

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

Subscribe Reply

4917

1
2
3
>
Last »

Vincent van Beveren

> 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

McKirahan

"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

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

Andrew DeFaria

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

Andrew Thompson

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 DeFaria

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

Andrew Thompson

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

Richard Cornford

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

Similar topics

1950

Registering KeyDown/KeyUp in the Panel

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, how can i made the KeyDown/KeyUp active in the extended Class which inheriting the BasePanel.

C# / C Sharp

2007

Redirect unless javascript events?

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 as though it had been refreshed. Is there any code which can detect javascript events and reset...

Javascript

1902

Removing in line javascript events

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

Javascript

19294

How to catch event KeyDown,KeyUp and KeyPress

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.

C# / C Sharp

8987

What is ONU?

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 usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

8826

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

9534

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

9366

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

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 captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

9316

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

8239

AI Job Threat for Devs

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 launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

6793

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

4867

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

3303

transfer the data from one system to another through ip address

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

C# / C Sharp