Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Javascript events: keydown, keyup and change are screwy

Reply
Thread Tools

Javascript events: keydown, keyup and change are screwy

 
 
Andrew DeFaria
Guest
Posts: n/a
 
      06-04-2004
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="javascript:">
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.

 
Reply With Quote
 
 
 
 
Vincent van Beveren
Guest
Posts: n/a
 
      06-04-2004
> 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="JavaScript">

function debug(s) {
ta = document.getElementById("debugArea");
ta.value+=s+"\n";
}

</script>
</head>
<body>
<form method="post" action="javascript:">
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>


 
Reply With Quote
 
 
 
 
Lee
Guest
Posts: n/a
 
      06-04-2004
Andrew DeFaria said:
>
>This is a multi-part message in MIME format.
>--------------020300050907030309060809


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

 
Reply With Quote
 
McKirahan
Guest
Posts: n/a
 
      06-04-2004
"Andrew DeFaria" <(E-Mail Removed)> wrote in message
news:4aedd$40c0045f$43661972$(E-Mail Removed) ervers.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="javascript:">
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.status +=":

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

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


 
Reply With Quote
 
DU
Guest
Posts: n/a
 
      06-04-2004
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="javascript:">


I'm surprised you can write
action="javascript:"
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.

KeyEventroperties (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
 
Reply With Quote
 
Andrew DeFaria
Guest
Posts: n/a
 
      06-05-2004
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="javascript:">

>
> I'm surprised you can write action="javascript:" 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.

> KeyEventroperties (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?
 
Reply With Quote
 
Richard Cornford
Guest
Posts: n/a
 
      06-05-2004
Andrew DeFaria wrote:
<snip>
> I'm confused! ...

<snip>

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

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

Richard.


 
Reply With Quote
 
Andrew DeFaria
Guest
Posts: n/a
 
      06-06-2004
Andrew Thompson wrote:

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


I mean when you don't have the money, resources nor time to purchase one
of each time of machine/OS and browser. YMMV.

--
Everyone has the right to be stupid, but your abusing the privilage.
 
Reply With Quote
 
Andrew DeFaria
Guest
Posts: n/a
 
      06-06-2004
Richard Cornford wrote:

> Andrew DeFaria wrote:
> <snip>
>
>> I'm confused! ...

>
> <snip>
>
> | Content-Type: multipart/alternative;
> | boundary="------------040701020404010203020602"
>
> Content types for posts to comp.lang.javascript should be plain text only.


So says you!

--
I went to a general store, but they wouldn't let me buy anything specific.

 
Reply With Quote
 
Lee
Guest
Posts: n/a
 
      06-06-2004
Andrew DeFaria said:
>
>This is a multi-part message in MIME format.
>--------------000602010602060307040007
>Content-Type: text/plain; charset=us-ascii; format=flowed
>Content-Transfer-Encoding: 7bit
>
>Richard Cornford wrote:
>
>> Andrew DeFaria wrote:
>> <snip>
>>
>>> I'm confused! ...

>>
>> <snip>
>>
>> | Content-Type: multipart/alternative;
>> | boundary="------------040701020404010203020602"
>>
>> Content types for posts to comp.lang.javascript should be plain text only.

>
>So says you!


So says the newsgroup FAQ:
http://www.jibbering.com/faq/#FAQ2_3

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Cross browser handling special chars with keypress/keyup listener Gregor Kofler Javascript 9 10-08-2009 04:48 PM
Can't cancel keyup event. Frank O'Hara Javascript 1 04-26-2007 02:32 PM
Help with Screwy DVD Problem. - Screwy.jpg (0/1) John H. Guillory Computer Support 14 07-27-2004 06:31 AM
keyup keydown Netscape > 4.x George Hester Javascript 2 01-16-2004 11:17 AM
Keyup, KeyDown, and KeyPress events for a datagrid do not work. URGENT !!!! Chris Calhoun ASP .Net Datagrid Control 1 10-10-2003 10:08 PM



Advertisments