Javascript事件：keydown，keyup和change很麻烦 [英] Javascript events: keydown, keyup and change are screwy
问题描述
我认为这会相当直接，但显然不是。
给出以下html文件：
<！DOCTYPE html PUBLIC" - // w3c // dtd html 4.0 transitional // en">
< html>
< head>
< title>测试< / title>
< / head>
< body>
< form method ="交" action =" javascript ：">
键入一个键
< input
align =" ;右边
type =" text"
name =" field"
size =" 8"
onkeydown =" alert（''keydown''）;"
onkeyup =" alert（''keyup''）;"
onchange =" alert（''change''）;"
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>
< /正文>
< / html>
非常简单。 （浏览到 http://defaria.com/test.html）。
期望的是，如果输入一个密钥，则会发生以下警报：
keydown，keyup，当你离开现场时，你会得到一个改变。不是这样两个主要浏览器的b $ b（我正在使用FireFox和IE）。
使用Firefox我得到以下内容（点击文字输入框并键入一个
字符）：
* keyup！为什么不先把keydown！
*改变！为什么要改变？！？我离开时只会改变
现场没有？
* keydown！这是关于时间的！
现在点击文本字段外的任何地方离开现场和...
没什么。
现在使用IE浏览器（再次单击文本输入bos并键入一个字符）：
* keydown - 酷，我期待
*没什么！ - 嗯，关键字发生了什么？！？
现在点击测试字段外的任何地方离开这个领域和：
*改变：好的，那是'预期但是又发生了怎样的keydown？
有人有什么想法吗？意见？
-
有些人就像Slinkies。 。什么都不是很好，但是当你看到一个人跌倒在楼梯上时，你仍然无法微笑。
</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.
推荐答案
>有人有什么想法吗？意见？
问题是，当你做一个警报时，一个单独的对话窗口打开了
，并且关闭窗口的事件就会丢失。不知何故
这会导致一些奇怪的行为。我稍微修改了你的脚本，现在它确实提供了你期望的输出。我在IE，NS7和FireFox中测试过它
<！DOCTYPE html PUBLIC" - // w3c // dtd html 4.0 transitional // en">
< html>
< head>
< title>测试< / title>
< script language =" ; JavaScript">
函数调试{
ta = document.getElementById（" debugArea"）;
ta.value + = s +" \ n";
}
< / script>
< / head>
< body>
< form method =" post" action =" javascript ：">
键入一个键
< input
align =" ;右边
type =" text"
name =" field"
size =" 8"
onkeydown =" debug（''keydown''）;"
onkeyup =" debug（''keyup''）;"
onchange =" debug（''change''）;"
> 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 = QUOT; debugArea"只读= QUOT;真" COLS = QUOT; 40" rows =" 20">< / textarea>
< / body>
< / html>
</form>
<textarea id="debugArea" readonly="true" cols="40" rows="20"></textarea>
</body>
</html>
Andrew DeFaria说：
Andrew DeFaria said:
这是一个MIME格式的多部分消息。
-------------- 020300050907030309060809
现在使用IE（再次单击文本输入bos并键入一个字符）：< br>
< ul>
< li> keydown - 很酷，我期待< / li> ;
< li>没什么！ - 嗯，关键字发生了什么？！？< / li>
< / ul>
现在点击测试字段外的任何地方离开该字段和：< br>
< ul>
< li>更改：确定'可以预期但是keydown发生了什么？< / li>
< ; / ul>
任何人都有任何想法？意见？< br>
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>
请将纯文本发布到此新闻组。
我没有Firefox，但在测试时在两个主要的浏览器中
我看到你为IE描述的结果。
你的文本元素永远不会看到keyup事件，因为警报
在它发生之前已经成为焦点。这就是keydown
事件很少有用的原因。
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.
" Andrew DeFaria" <安**** @ DeFaria.com>在消息中写道
新闻：4a *************************** @ msgid.meganewss ervers.com .. 。
我认为这是相当直接但显然不是。
给出以下html文件：
<！DOCTYPE html PUBLIC" - // w3c // dtd html 4.0 transitional // en">
< html>
< head>
< title>测试< / title>
< / head>
< body>
< ; form method =" post" action =" javascript ：">
键入一个键
< input
align =" ;右边
type =" text"
name =" field"
size =" 8"
onkeydown =" alert（''keydown''）;"
onkeyup =" alert（''keyup''）;"
onchange =" alert（''change''）;"
"Andrew DeFaria" <An****@DeFaria.com> wrote in message
news:4a***************************@msgid.meganewss 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>
非常简单。 （浏览到 http://defaria.com/test.html）。
所期望的是，如果输入一个密钥，将发生以下警报：keydown，
主流浏览器不是这样（我正在使用FireFox和IE）。
使用Firefox我得到以下内容（点击文字输入框并键入一个
字符）：
keyup！为什么不先把keydown！
改变！为什么要改变？！？我离开球场时只会有变化
没有？
keydown！这是关于时间的！
现在点击文本字段外的任何地方离开现场和...
没什么。
现在使用IE浏览器（再次单击文本输入bos并键入一个字符）：
keydown - 很酷，我期待什么
没什么！ - 嗯，关键字发生了什么？！？
现在点击测试字段外的任何地方离开这个领域和：
改变：好的，那是'预期但是又发生了怎样的keydown？
有人有什么想法吗？意见？
-
有些人就像Slinkies。 。什么都不是很好，但是当你看到一个人跌倒在楼梯上时，你仍然无法微笑。
尝试改变警报 towindows.status + ="：
< html>
< head>
< title> ; onkeys.htm< / title>
< / head>
< body>
< form method =" post" action =" javascript ：">
键入一个键
< input
align =" ;右边
type =" text"
name =" field"
size =" 8"
onkeydown =" window.status + =''keydown'';"
onkeyup =" window.status + =''keyup'';"
onchange =" window.status + =''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>
</form>
</body>
</html>
这篇关于Javascript事件：keydown，keyup和change很麻烦的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
