通过在没有提交按钮的情况下按Enter来提交表单

Question

通过在没有提交按钮的情况下按Enter来提交表单

嗯，我试图提交一个表格，按下Enter，但不显示提交按钮。如果可能的话，我不想进入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>

效果很好。当用户按Enter键时，Submit按钮工作，并且该按钮在Firefox、IE、Safari、Opera和Chrome中不显示。但是，我仍然不喜欢这个解决方案，因为很难知道它是否能在所有浏览器的平台上工作。

有人能提出更好的方法吗？还是像现在一样好？

Answer 1

试着：<input&nbsp;type="submit"&nbsp;style="position:&nbsp;absolute;&nbsp;left:&nbsp;-9999px"/>这将推动按钮向左，走出屏幕。这样做的好处是，当CSS被禁用时，您会得到优雅的降级。更新-IE7的解决方案正如布莱恩·唐宁+的建议tabindex为了防止选项卡到达此按钮(由Ates Gor)：<input&nbsp;type="submit"&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style="position:&nbsp;absolute;&nbsp;left:&nbsp;-9999px;&nbsp;width:&nbsp;1px;&nbsp;height:&nbsp;1px;" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tabindex="-1"&nbsp;/>

Answer 2

我觉得你应走Javascript路线，或者至少我会：<script&nbsp;type="text/javascript">//&nbsp;Using&nbsp;jQuery.$(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$('form').each(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).find('input').keypress(function(e)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Enter&nbsp;pressed? &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(e.which&nbsp;==&nbsp;10&nbsp;||&nbsp;e.which&nbsp;==&nbsp;13)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.form.submit(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).find('input[type=submit]').hide(); &nbsp;&nbsp;&nbsp;&nbsp;});});</script><form&nbsp;name="loginBox"&nbsp;target="#here"&nbsp;method="post"> &nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;name="username"&nbsp;type="text"&nbsp;/><br&nbsp;/> &nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;name="password"&nbsp;type="password"&nbsp;/> &nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type="submit"&nbsp;/></form>

Answer 3

你试过这个吗？<input&nbsp;type="submit"&nbsp;style="visibility:&nbsp;hidden;"&nbsp;/>因为大多数浏览器都能理解visibility:hidden它并不是真的像display:none我猜应该会没事的。还没亲自测试过所以CMIIW。