IE需要2个文本框才能提交按钮？

I've got this weird problem, and I'm not sure whether ASP.NET or IE 7 is to blame...

我有这个奇怪的问题,我不确定ASP.NET或IE 7是否应该受到指责......

The idea is this: When I have just one textbox and one (submit) button on my form, then pressing ENTER while inside the textbox will just POST the textbox'es value. The button does not get submitted and does not trigger the Click even server-side.

这个想法是这样的:当我在表单上只有一个文本框和一个(提交)按钮时,然后在文本框内按ENTER键将只发布文本框的值。该按钮未提交,也不会触发Click甚至服务器端。

When I have two textboxes, then hitting ENTER in any of them will also send the button and trigger the Click event.

当我有两个文本框时,在其中任何一个中按Enter键也会发送按钮并触发Click事件。

WTF?

Added: Seems to be an IE-related issue. Here's a simple example to demonstrate. Pay attention to the address bar and hit ENTER when in the first textbox, and then when in some of the last two.

补充:似乎是与IE相关的问题。这是一个简单的示例来演示。注意地址栏并在第一个文本框中点击ENTER,然后在最后两个文本框中点击。

<html>
    <body>
        <form method="GET" action="" style="display: block">
            <input type="text" id="ctl1" name="ctl1" value="">
            <input type="submit" id="ctl2" name="ctl2" value="Klik">
        </form>
        <form method="GET" action="" style="display: block">
            <input type="text" id="ctl1" name="ctl1" value="">
            <input type="text" id="ctl3" name="ctl3" value="">
            <input type="submit" id="ctl2" name="ctl2" value="Klik">
        </form>
    </body>
</html>

4 个解决方案

#1

If I were you, I would write the form so that you don't need to worry about the click handler on the button (after all, it wasn't clicked), and also ignore the button's value when the form is submitted (never understood why buttons have values that are submitted).

如果我是你,我会编写表单,这样您就不必担心按钮上的点击处理程序(毕竟,它没有被点击),并且在提交表单时也忽略了按钮的值(从不理解为什么按钮具有提交的值)。

As a comment to your question points out, the ENTER button's behaviour is not well standardized and you can get different behaviour in different browsers, so even if you think your page works properly it might not for all your users. Also, there are other ways forms can be submitted:

作为对您的问题的评论指出,ENTER按钮的行为没有很好地标准化,您可以在不同的浏览器中获得不同的行为,因此即使您认为您的页面正常工作,它可能不适合所有用户。此外,还有其他方式可以提交表格:

Enter key
Submit button
Javascript form.submit()
<input type="image">

For robustness, I'd use the form's onsubmit event handler to do anything that needs to happen when the form is submitted, and only use the onclick handlers to do things that need to happen when a specific button is clicked (most will just submit the form). As for the button value, I'd use an <input type="hidden"> to store whatever hidden value I want for the multiple button scenario, and not bother with the button's value.

为了提高稳健性,我使用表单的onsubmit事件处理程序来执行提交表单时需要执行的任何操作,并且只使用onclick处理程序来执行在单击特定按钮时需要执行的操作(大多数只会提交形成)。至于按钮值,我使用来存储我想要的多按钮场景的任何隐藏值,而不是打扰按钮的值。

However, if those options are not available to you, you can add a hidden input field:

但是,如果您无法使用这些选项,则可以添加隐藏的输入字段:

<input type="text" id="h1" name="h1" value="ignore" style="display: none">

This seemed to solve the problem for me on IE8 with your sample code.

这似乎解决了IE8上带有示例代码的问题。

#2

The default behavior for a html form is to submit the form if any control has focus. What you need to do is trap for the ENTER key and then handle form submissions how you want to.

html表单的默认行为是在任何控件具有焦点时提交表单。您需要做的是陷阱为ENTER键,然后处理表单提交您想要的方式。

I have done something like this before (there are many sources for this script):

之前我做过类似的事情(这个脚本有很多来源):

<script language="javascript"> 
function returnkey(evt)  {
    var evt = (evt) ? evt : ((event) ? event : null);
    var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
    if ((evt.keyCode == 13) && (node.type!="textarea"))  {return false;} }

document.onkeypress = returnkey; 
</script>

#3

If you are using asp.net, one option I've used to correct this problem is to set the button to runat="server", wrap your controls in a panel, and set the panel's defaultbutton property to the ID of the button.

如果您使用的是asp.net,我用来解决此问题的一个选项是将按钮设置为runat =“server”,将控件包装在面板中,并将面板的defaultbutton属性设置为按钮的ID。

#4

~~If you're using ASP.NET then you should only have a single form. You should also have the runat="server" attribute on any controls you want to access server-side (including the form iteself).~~

如果您使用的是ASP.NET,那么您应该只有一个表单。您还应该在要访问服务器端的任何控件上使用runat =“server”属性(包括表单iteself)。

OK, no ASP.NET. It's not posting anything because you've got GET as the method in your form??

好的,没有ASP.NET。它没有发布任何东西,因为你已经获得了GET作为你表单中的方法?

#1

Enter key
Submit button
Javascript form.submit()
<input type="image">