输入按钮不提交表单(仅限IE)ASP.NET

问题描述:

我有一个带有文本框和按钮的窗体。 IE是唯一一个在按下Enter键时不会提交表单的浏览器(适用于FF,Opera,Safari,Chrome等)。我发现这个javascript函数试图哄骗IE进入行为;但无济于事:输入按钮不提交表单(仅限IE)ASP.NET

function checkEnter(e){ 
    var characterCode 
    if (e && e.which) { 
     e = e 
     characterCode = e.which 
    } else { 
     e = event 
     characterCode = e.keyCode 
    } 
    if (characterCode == 13) { 
     document.forms[0].submit() 
     return false 
    } else { 
     return true 
    } 
} 

实现:

searchbox.Attributes("OnKeyUp") = "checkEnter(event)" 

有什么建议?

编辑:This pageCodeProject概述了Dillie在说,它完美的作品。

+1

那么,你的表单根本没有按钮? – James 2008-11-06 22:23:20

+0

对不起,它也有一个按钮。感谢您指出了这一点。 – Anders 2008-11-10 13:44:21

我过去做过的其他事情是将表单区域封装在Panel中,并将DefaultButton属性设置为您有的提交按钮。只要在面板区域中有焦点的表单元素,就可以将输入键有效地映射到提交。

// Use the following Javascript in your HTML view 
// put it somewhere between <head> and </head> 

    <script language="JavaScript" type="text/javascript"><!-- 
    function KeyDownHandler(btn) 
    { 
     if (event.keyCode == 13) 
     { 
     event.returnValue=false; 
     event.cancel = true; 
     btn.click(); 
     } 
    } 
    // --> 
    </script> 

    // Put this in your TextBox(es) aka inside <asp:textbox ... > 
    onkeydown="KeyDownHandler(ButtonID)" 
+0

感谢您的输入,它会抛出一个可爱的'对象不支持此属性或方法'错误,但:( – Anders 2008-11-06 22:12:04

它使用GET而不是POST吗? URL是否过长?我已经看到了...

基本上,表单需要按钮,输入类型=“提交”或输入类型=“图像”,以使内置行为在输入时提交表单。你不应该需要一个JavaScript来提交它。

只需在页面上的隐藏div中创建一个文本输入。这将绕过IE错误。

实施例的div:

<!-- Fix for IE bug (One text input and submit, disables submit on pressing "Enter") --> 
    <div style="display:none"> 
      <input type="text" name="hiddenText"/> 
    </div> 

当使用display:none,IE不会看到按钮,并且因此将不能够使用它来提交表单。相反,您可以使用z-index和绝对定位将其隐藏在其他元素下方,例如与风格:

position:absolute; bottom: -20px; left: -20px; z-index: -1;

现在,它仍然在那里,通过IE浏览器使用,却隐藏着另一个元素之下。

出现这个问题的一个很好的写在这里,和基于jQuery的不错的解决方案:

http://www.thefutureoftheweb.com/blog/submit-a-form-in-ie-with-enter

这是由于对单个文本字段输入在IE中一个特点。

一个简单的解决方案是通过添加另一个隐藏的页面来停止具有单个文本字段的页面。

<input type="text" name="hidden" style="visibility:hidden;display:none;" /> 

看.. http://www.4guysfromrolla.com/articles/060805-1.aspx

隐藏按钮 - 不使用显示:无,但有以下样式:

position: absolute; /* no longer takes up layout space */ 
visibility: hidden; /* no longer clickable/visible */ 

如果你这样做,你就不会需要添加任何其他元素或隐藏的输入。