好吧,我想通过按Enter键但不显示提交按钮来提交表单.如果可能的话,我不想进入JavaScript,因为我希望所有浏览器都可以工作(我知道的唯一JS方式是事件).
现在表单看起来像这样:
哪个效果很好.当用户按下Enter键时,提交按钮会起作用,并且该按钮不会显示在Firefox,IE,Safari,Opera和Chrome中.但是,我仍然不喜欢这个解决方案,因为很难知道它是否适用于所有浏览器的所有平台.
有谁能建议更好的方法？或者这是否与它一样好？
1> Ates Goral..： 尝试:
这将按钮向左推出,离开屏幕.这样做的好处是,当CSS被禁用时,你会得到优雅的降级.
更新 - IE7的解决方法
正如Bryan Downing +所建议的,tabindex以防止标签到达此按钮(由Ates Goral提供):
真可怕的黑客:(为什么HTML首先是这样的？在这种情况下输入不工作是否有充分的理由？
@nornagon:如果你觉得这个黑客很糟糕,可以随意提出一个不那么可怕的黑客.HTML就是这样......
"好的一面是......当CSS被禁用时,优雅的降级"？!我的意思是,这很有效,但"优雅退化"部分只是营销策略.直到我找到[2002年这个页面](http://www.webmasterworld.com/forum83/80.htm)之前我才听说过它.这是正确的,第一页上"_ css在浏览器中被禁用"的_only_ Google结果是从10年前开始的_(或者考虑到这个答案是在2009年提出的7).
@MooseFactory`tabindex =" - 1"`
刚尝试在IE7中使用与Erebus相同的结果.以下代码修复了它:`position:absolute; 宽度:1px; 身高:1px; 左:-9999px;`
@VickyChijwani如果您的连接速度很慢并且加载CSS需要时间/中断,您最终可能会得到一个没有CSS的页面.你仍然可以有一个功能[但丑陋]页面,优雅降级.这也是关于稳健性,而不仅仅是大约10年的营销时尚.
不是很好.您仍然可以选择"隐藏"按钮.
运行良好,这个解决方案的thx.对于那些询问为什么不只是"display:none"的人:在chrome和FF 20中(我只测试了这两个)如果我用display:none隐藏提交按钮,那么表单的onsubmit ="..."属性表现得很奇怪/例如不尊重"返回虚假"并提交表格无论如何/.我发现它的方式很难,我希望有人能从中吸取教训.
这是丑陋讨厌的黑客!但是因为它完美无缺,我会坚持下去并且赞成这个:)
@Vicky Chijwani优雅的降级可能会对身体挑战和他们使用的任何软件都很方便.这是任何政府网站的必需品,至少在大多数国家都是如此
2> strager..： 我认为你应该 去Javascript路线,或者至少我会:
从自动完成中选择也会触发按键,即如果用户正在输入电子邮件地址并且他/她通过按Enter键从浏览器的自动完成中选择之前给定的一个,则表单将提交.不是您的用户期望的.
很好的,经过测试,工作正常.但在尝试这样的事情之前,请记住通过Javascript提交表单不会导致某些浏览器提供密码保存的东西.
这将导致提交按钮出现片刻(直到页面加载并且JS运行).
我从`keypress`切换到`keydown`以获得更广泛的支持,但如果你希望支持Chrome,你还需要在`if`之前添加`e.preventDefault();`.
3> andyk..： 你试过这个吗？
由于大多数浏览器都理解visibility:hidden并且它不能真正起作用display:none,我猜它应该没问题.我自己没有真正测试过,所以CMIIW.
您可以组合两种解决方案:`
`
关于`visibility:hidden`只有一点:你可以在[w3schools](http://www.w3schools.com/css/css_display_visibility.asp)中看到,_visibity:none_仍会影响布局.如果你想避免这个空白,绝对定位的解决方案对我来说似乎更好.
是的 - 这适用于chrome,与使用display:none;不同.
该死的,这在IE8中不起作用(它不提交表格),所以上面的解决方案获胜:`position:absolute; 左:-100px; 宽度:1px; 身高:1px;`
我刚刚测试过`display:none;`它运行正常.
4> damoiser..： 没有提交按钮的另一个解决方案
HTML
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;
}
});
});
5> Panomosh..： 对于将来查看此答案的任何人,HTML5都会为表单元素实现一个新属性hidden,该属性将自动应用于display:none您的元素.
例如
6> 小智..： 使用以下代码,这解决了我在所有3个浏览器(FF,IE和Chrome)中的问题:
将上面的行添加为代码中的第一行,并使用适当的name和value值.
7> Noldorin..： 您可以visibility: collapse;在style属性中设置,而不是当前用来隐藏按钮的hack .但是,我仍然建议使用一些简单的Javascript来提交表单.据我所知,现在对这类事物的支持无处不在.
8> jumpnett..： 只需将hidden属性设置为true即可:
隐藏属性将按Enter键禁用提交.
9> Waltur Buerk..： 最优雅的方法是保留提交按钮,但将其边框,填充和字体大小设置为0.
这将使按钮尺寸为0x0.
您可以自己尝试,并通过设置元素的轮廓,您将看到一个点,这是"围绕"0x0 px元素的外边框.
不需要能见度:隐藏,但如果它让你在晚上睡觉,你也可以把它扔进混合物中.
JS小提琴
10> 小智..： 如果提交按钮不可见,IE不允许按ENTER键进行表单提交,并且表单有多个字段.通过提供1x1像素透明图像作为提交按钮,给它想要的东西.当然它会占用布局的一个像素,但看看你需要做些什么来隐藏它.
京公网安备 11010802040832号 | 京ICP备19059560号-6 
