通过按回车提交表单而不用提交按钮

那么我试图通过按下提交表单,但不显示提交按钮。 如果可能的话,我不想进入JavaScript,因为我希望所有的浏览器都能正常工作(我知道的唯一的JS方式就是事件)。

现在表格看起来像这样:

<form name="loginBox" target="#here" method="post"> <input name="username" type="text" /><br /> <input name="password" type="password" /> <input type="submit" style="height: 0px; width: 0px; border: none; padding: 0px;" hidefocus="true" /> </form> 

哪个工作得很好。 当用户按下回车键时,提交按钮就起作用,而按钮不会在Firefox,IE,Safari,Opera和Chrome中显示。 然而,我仍然不喜欢这个解决方案,因为很难知道它是否可以在所有浏览器的所有平台上工作。

任何人都可以提出更好的方法? 或者这是一样好,它得到?

尝试:

 <input type="submit" style="position: absolute; left: -9999px"/> 

这将按钮waaay向左​​,在屏幕之外。 这件事情的好处是,当CSS被禁用时,你会得到优雅的降级。

更新 – IE7的解决方法

正如布赖恩·唐宁(Bryan Downing)和tabindex建议,以防止标签到达这个按钮(Ates Goral):

 <input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;" tabindex="-1" /> 

我想你应该去的Javascript路线,或者至少我会:

 <script type="text/javascript"> // Using jQuery. $(function() { $('form').each(function() { $(this).find('input').keypress(function(e) { // Enter pressed? if(e.which == 10 || e.which == 13) { this.form.submit(); } }); $(this).find('input[type=submit]').hide(); }); }); </script> <form name="loginBox" target="#here" method="post"> <input name="username" type="text" /><br /> <input name="password" type="password" /> <input type="submit" /> </form> 

你尝试过吗?

 <input type="submit" style="visibility: hidden;" /> 

由于大多数浏览器都理解visibility:hidden ,它并不像display:none那样工作,但是我猜测它应该没问题。 还没有真正测试过自己,所以CMIIW。

另一个解决方案没有提交按钮:

HTML

 <form> <input class="submit_on_enter" type="text" name="q" placeholder="Search..."> </form> 

jQuery的

 $(document).ready(function() { $('.submit_on_enter').keydown(function(event) { // enter has keyCode = 13, change it if you want to use another button if (event.keyCode == 13) { this.form.submit(); return false; } }); }); 

使用下面的代码,这在所有3个浏览器(FF,IE和Chrome)中解决了我的问题:

 <input type="submit" name="update" value=" Apply " style="position: absolute; height: 0px; width: 0px; border: none; padding: 0px;" hidefocus="true" tabindex="-1"/> 

将上面的行添加为代码中的第一行,并带有相应的名称和值。

取代当前用来隐藏按钮的黑客,设置visibility: collapse;会更简单visibility: collapse; 在style属性中。 不过,我仍然建议使用一些简单的Javascript来提交表单。 据我所知,现在对这种事情的支持是无处不在的。

只需将隐藏属性设置为true:

 <form name="loginBox" target="#here" method="post"> <input name="username" type="text" /><br /> <input name="password" type="password" /> <input type="submit" hidden="true" /> </form> 

如果提交按钮不可见,IE不允许按ENTER键进行表单提交,并且表单有多个字段。 通过提供一个1×1像素的透明图像作为提交按钮来给它想要的东西。 当然,它会占用布局的一个像素,但看看你必须做什么来隐藏它。

 <input type="image" src="img/1x1trans.gif"/> 

这是我的解决方案,在Chrome,Firefox 6和IE7 +中测试:

 .hidden{ height: 1px; width: 1px; position: absolute; z-index: -100; } 

这样做的最优雅的方式是保持提交按钮,但将边框,填充和字体大小设置为0。

这将使按钮尺寸为0x0。

 <input type="submit" style="border:0; padding:0; font-size:0"> 

你可以自己尝试,通过设置元素的轮廓,你会看到一个点,这是外围边界“围绕”0x0像素元素。

不需要可见性:隐藏,但如果它让你在晚上睡觉,你也可以把它扔在混合物中。

JS小提琴

最简单的方法

 <input type="submit" style="width:0px; height:0px; opacity:0;"/> 

对于IE和其他人有问题的人也是如此。

 { float: left; width: 1px; height: 1px; background-color: transparent; border: none; } 

你也可以试试这个

 <INPUT TYPE="image" SRC="0piximage.gif" HEIGHT="0" WIDTH="0" BORDER="0"> 

你可以包含一个图像的宽度/高度= 0像素

对于将来要查看这个答案的任何人,HTML5为表单元素实现了一个新的属性hidden ,它会自动将display:none应用于元素。

例如

 <input type="submit" hidden /> 

我把它添加到文档准备好的功能。 如果表单上没有提交按钮(我的所有Jquery对话框都没有提交按钮),将其追加。

 $(document).ready(function (){ addHiddenSubmitButtonsSoICanHitEnter(); }); function addHiddenSubmitButtonsSoICanHitEnter(){ var hiddenSubmit = "<input type='submit' style='position: absolute; left: -9999px; width: 1px; height: 1px;' tabindex='-1'/>"; $("form").each(function(i,el){ if($(this).find(":submit").length==0) $(this).append(hiddenSubmit); }); } 
 <input type="submit" style="display:none;"/> 

这工作正常,这是你想要实现的最明确的版本。

请注意, display:nonevisibility:hidden于其他表单元素之间。

我用过了

 < input class="hidden" type="submit" value="" onclick="document.getElementById('loginform').submit()"; /> 

  .hidden { border:0; padding:0; font-size:0; width: 0px; height: 0px; } 

在.css文件中。 它对我也很神奇。 🙂