编程社区 » javascript编程 » 100 分求解一个关于回车的问题

100 分求解一个关于回车的问题

rainingheart

发表:

100 分求解一个关于回车的问题

这问题是我在别的论坛中看到的,我想想自已也不会,所以来请各位CSDN的高手帮帮忙

下面是原文(原网址是http://www.chinaaspx.com/comm/dotnetbbs/Showtopic.aspx?Forum_ID=5&Id=252416&PPage=2)

页面回车按钮的困惑
虽然可以避免问题，但是问题仍然存在：
一个HTML页面，很简单的只有一个表格，两个测试用的js

<html>
<head>
<script>
function onSub() {
alert("button submit");
return true;
}

function keypress() {
if(event.keyCode == 13) {
document.getElementsByName("sub1")[0].click();
return false;
}
return true;
}

function onSubmit() {
alert("automatic submit");
return true;
}
</script>
</head>
<body>
<form onsubmit="return onSubmit();">
<table width=200 height=200>
<tr>
<td>
<input type="text" name="text1">
</td>
<td>
<input type="submit" value="submit" name="sub1" onclick="return onSub();">
</td>
</tr>
</table>
</form>
</body>
</html>

解释一下，画面上只有一个textbox和一个submit类型的按钮，按照常理来讲，在html画面上点击回车按钮，默认激发的submit按钮事件。现在我做了这个一个画面，当在textbox中点下回车键的时候，没有激发submit按钮事件，而是直接form的onsubmit事件，于是，画面上只弹出了“automatic submit”，但是，我在那个textbox下面同样的copy了一个textbox的时候，名字不一样的当然，再在textbox中点回车键的时候，就触发了submit按钮，于是，画面就弹出了两个message，第一个“button submit”，第二个“automatic submit”，思考不得其解，于是，我仍然只保留了第一个textbox，把后来追加的textbox删除掉了，加上了一个属性，onkeypress="return keypress();"，结果和有两个textbox的结果一致，废话，当然一致了，嗯，由于没有仔细的了解html的精髓，所以这个问题想不清楚，如果大家有知道的，不访告诉一下兄弟。ok？

为什么一个控件数时不激发而有两个的时候就会默认去激发submit按钮了呢？？？

rainingheart

回复:

没有人?
沙发自己坐了

bigman_lfj

回复:

form内默认情况下Enter就是对应着form的submit,不管你是post还是get, 所以你在text下面按下Enter直接触发onSubmit, 默认的submit按钮本身按下后就会触发onSubmit,所以在你在这个submit按钮追加了一个onclick以后，会先响应click事件，然后又出发了自己默认的时间。

rainingheart

回复:

那为什么有一个<input>时只会会触发一个(automatic submit),
而后来再加一个<input>即两个<input>时会都触发了呢(button submit,automatic submit)?

rainingheart

回复:

在<input>中按回车时:

1.
只有一个<input>时
<input type="text" name="text1">
只触发一个(automatic submit)
2.
加一个<input>即
<input type="text" name="text1">
<input type="text" name="text2">
触发了两个(button submit,automatic submit)?

NiuniuASP

回复:

试了半天,问题和LZ描述的一样,没找到原因.

descreekert

回复:

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects/form.asp

If the form includes only one text box and the user presses ENTER, the onsubmit event fires. If the form has an INPUT type=submit element, it will appear as a button with a dark border, which indicates the user can press ENTER to submit the form.
如果表单仅包含一个文本框时用户按下回车键，onsubmit 事件将触发。如果表单有 INPUT type=submit 元素，该元素将会变为带有黑色边框，这意味着用户按下回车键即可提交表单。

也就是说，如果form中只有一个文本框，会直接触发onsubmit 事件，而不去执行INPUT type=submit 元素的onclick事件。

li1229363

回复:

我也不理解的说～高手请回答～

NiuniuASP

回复:

有多个文本框时,表单的 INPUT type=submit 元素也带有黑色边框，那不是同样意味着用户按下回车键即可提交表单?为何就执行INPUT type=submit 元素的onclick事件呢?

skendy

回复:

呵呵，这个问题的确比较怪...
我翻书找找..

rainingheart

回复:

呵呵,CSDN的人真热心啊^_^

skendy

回复:

兄弟还在阿，
我刚才做了测试，具体什么原因，我现在不能给出肯定的答案。
你把你的程序用Firefox浏览器测试，我怀疑是IE对JavaScript支持的方式不一样，Firefox支持JavaScript是正宗的。
多做几个测试，比如:Form里面添加<img .... /> <input type="radio" ... /> 或者把最后的<input type="submit" ....> 修改成<input type="button" /> 然后测试在不同的内容怎么调用JavaScript

我还在翻书，《JavaScript权威指南》太厚了，一下子也找不出来正确答案....

chenguang79

回复:

<SCRIPT LANGUAGE="JavaScript" event="onkeydown" for="document">
if (event.keyCode == 13){
document.UserLogin.submit();
}
</SCRIPT>

<area shape="circle" coords="23,40,24" href="#" onclick=javascript:document.UserLogin.submit();>

UserLogin为你的form名

theseraph

回复:

楼主可以干脆把
<input type="submit" value="submit" name="sub1" onclick="return onSub();">
去掉
也就是不要提交按钮

然后，当表单内只有一个INPUT文本框时，你按回车，也会执行自动提交事件。
这是因为，只有一个输入控件的情况下，你按回车，毫无疑问就是应该要提交表单了。
但当有一个以上的输入控件时，这个默认就不能成立了，因为其它的输入控件未必是输入有效的状态嘛。

hax

回复:

ie的特殊处理，你可以认为是它的bug，估计是为单个input写特例代码的后遗症（或者m$的fans可以认为这是一个feature）。

ff和opera的处理是完全一致的，总是会触发第一个submit按钮或者button按钮（不是input type=button）的onclick，而不管有几个文本框。

最佳实践：不要在submit上写onclick事件，只使用form上的onsubmit。

theseraph

回复:

不对，错了，乱了，哈

实际上，是相当于在只有一个文本框时，SUBMIT按钮无效了，被越过了。当有多个文本框时才正常。

而且
function keypress() {
if(event.keyCode == 13) {
document.getElementsByName("sub1")[0].click();
return false;
}
return true;
}
可以去掉，效果一样

skendy

回复:

function keypress() 这个函数本来一直就没有用...

如果你想用，应该这样写
<body onLoad="keypress()">
....

以后测试JavaScript最好用Firefox..
IE是为它的Jscript服务的...

theseraph

回复:

刚才一下又乱了。现在又绕回来了。
还是象我刚才所说的：
IE为了满足对一个输入控件进行自动提交，实际上它就采取绕过SUBMIT按钮，直接提交了。
而当输入控件不只一个的时候，就不能应用那套默认机制，而必须通过SUBMIT按钮来进行提交，所以按钮的事件又好使了。

hax

回复:

哦，还有，ff在没有submit或button的时候表现与ie是一致的，即仅单个文本框会触发onsubmit，而opera总是会触发。

相对来说，ff的行为最复杂。

1. 有submit或button时，触发submit或button的onclick，然后该onclick的默认行为会触发onsubmit。
2. 没有submit或button时，
2.1 只有一个text框时，触发onsubmit；
2.2 有多个text框时，不触发onsubmit。

opera的行为是第2条简化为（不管几个text框）总是触发onsubmit。

ie最傻呆：

1. 只有一个text框时，（不管有没有submit），直接触发onsubmit
2. 有多个text框时，触发submit上的onclick，其默认行为为触发onsubmit。

显然，我们很容易推理出来：最早ie是没有对单个text框做处理的，后来要加上这个feature，于是以很粗陋的打patch的方式对单个text框做了特殊处理，结果就是如此了。