好吧,我想通过按Enter键但不显示提交按钮来提交表单 . 如果可能的话,我不想进入JavaScript,因为我希望所有浏览器都可以工作(我知道的唯一JS方式是事件) .
现在表单看起来像这样:
<form name="loginBox" target="#here" method="post">
<input name="username" type="text" />
<input name="password" type="password" />
<input type="submit" style="height: 0px; width: 0px; border: none; padding: 0px;" hidefocus="true" />
</form>
哪个效果很好 . 当用户按下Enter键时,提交按钮有效,并且该按钮不会显示在Firefox,IE,Safari,Opera和Chrome中 . 但是,我仍然不喜欢这个解决方案,因为很难知道它是否适用于所有浏览器的所有平台 .
有谁能建议更好的方法?或者这是否与它一样好?
18 回答
尝试:
这会将按钮向左推,离开屏幕 . 这样做的好处是,当CSS被禁用时,你会得到优雅的降级 .
Update - Workaround for IE7
正如布莱恩·唐宁(Bryan Downing)用
tabindex
所建议的那样,以防止标签到达此按钮(由Ates Goral提供):这很好,它是你想要实现的最明确的版本 .
请注意,对于其他表单元素,
display:none
和visibility:hidden
之间存在差异 .使用以下代码,这解决了我在所有3个浏览器(FF,IE和Chrome)中的问题:
将上面的行添加为代码中的第一行,并使用适当的name和value值 .
HTML5解决方案
最简单的方法
我把它添加到文件就绪的函数中 . 如果表单上没有提交按钮(我的所有Jquery对话框表单都没有提交按钮),请将其附加 .
最优雅的方法是保持提交按钮,但将其边框,填充和字体大小设置为0 .
这将使按钮尺寸为0x0 .
您可以自己尝试,并通过设置元素的轮廓,您将看到一个点,这是“围绕”0x0 px元素的外边框 .
不需要可见性:隐藏,但如果它让你在晚上睡觉,你也可以把它扔进混合物中 .
JS Fiddle
你也可以试试这个
您可以包含宽度/高度= 0像素的图像
对于将来查看此答案的任何人,HTML5都会为表单元素
hidden
实现一个新属性,该属性会自动将display:none
应用于您的元素 .例如
对于那些有IE和其他人有问题的人 .
只需将hidden属性设置为true即可:
你试过这个吗?
由于大多数浏览器都理解
visibility:hidden
并且它确实不像display:none
那样工作,所以我自己测试了它,所以CMIIW .这是我的解决方案,在Chrome,Firefox 6和IE7中测试过:
而不是当前用来隐藏按钮的黑客,在style属性中设置
visibility: collapse;
要简单得多 . 但是,我仍然建议使用一些简单的Javascript来提交表单 . 据我所知,现在对这类事物的支持无处不在 .如果提交按钮不可见,IE不允许按ENTER键进行表单提交,并且表单有多个字段 . 通过提供1x1像素透明图像作为提交按钮,给它想要的东西 . 当然它会占用布局的一个像素,但看看你需要做些什么来隐藏它 .
没有提交按钮的另一个解决方案
HTML
jQuery的
我用过
和
在.css文件中 . 它也为我神奇地工作 . :)
我认为你应该去Javascript路线,或者至少我会: