通过没有提交按钮的输入来提交表单

Well I am trying to submit a form by pressing enter but not displaying a submit button. I don't want to get into JavaScript if possible since I want everything to work on all browsers (the only JS way I know is with events).

我想通过按enter来提交表单，但不显示submit按钮。如果可能的话，我不想进入JavaScript，因为我希望所有的浏览器都能运行(我知道的唯一的JS方法就是事件)。

Right now the form looks like this:

现在的表格是这样的:

<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>

Which works pretty well. The submit button works when the user presses enter, and the button doesn't show in Firefox, IE, Safari, Opera and Chrome. However, I still don't like the solution since it is hard to know whether it will work on all platforms with all browsers.

工作的很好。提交按钮在用户按回车时工作，按钮在Firefox、IE、Safari、Opera和Chrome中不显示。但是，我仍然不喜欢这个解决方案，因为很难知道它是否适用于所有浏览器的所有平台。

Can anyone suggest a better method? Or is this about as good as it gets?

谁能提出更好的方法吗?还是说这是最好的结果?

17 个解决方案

#1

208

Try:

试一试:

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

That will push the button waaay to the left, out of the screen. The nice thing with this is, you'd get graceful degradation when CSS is disabled.

这样就可以将按钮从屏幕上按到左边。这样做的好处是，当CSS被禁用时，您将得到优雅的降级。

Update - Workaround for IE7

更新- IE7的变通方法

As suggested by Bryan Downing + with tabindex to prevent tab reach this button (by Ates Goral):

正如Bryan Downing +和tabindex建议的那样，防止制表符到达这个按钮(由Ates Goral提出):

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

#2

I think you should go the Javascript route, or at least I would:

我认为你应该走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>

#3

Have you tried this ?

你试过这个吗?

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

Since most browsers understand visibility:hidden and it doesn't really work like display:none, I'm guessing that it should be fine, though. Haven't really tested it myself, so CMIIW.

由于大多数浏览器都理解可视性:hidden，并且它并不像display:none那样工作，所以我想应该没问题。我自己还没做过测试，所以CMIIW。

#4

Another solution without the submit button:

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

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;
    }
  });

});

#5

Use following code, this fixed my problem in all 3 browsers (FF, IE and Chrome):

使用以下代码，这解决了我在所有三个浏览器(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"/>

Add above line as a first line in your code with appropriate value of name and value.

在代码中添加上面一行作为第一行，并使用适当的名称和值。

#6

For anyone looking at this answer in future, HTML5 implements a new attribute for form elements, hidden, which will automatically apply display:none to your element.

对于将来查看这个答案的人来说，HTML5为隐藏的表单元素实现了一个新的属性，它将自动地将display:none应用到您的元素中。

e.g.

如。

<input type="submit" hidden />

#7

Instead of the hack you currently use to hide the button, it would be much simpler to set visibility: collapse; in the style attribute. However, I would still recommend using a bit of simple Javascript to submit the form. As far as I understand, support for such things is ubiquitous nowadays.

与您目前用来隐藏按钮的黑客方法不同，设置可见性要简单得多:崩溃;样式属性。但是，我仍然建议使用一些简单的Javascript来提交表单。据我所知，如今对这些东西的支持无处不在。

#8

Just set the hidden attribute to true:

只需将隐藏属性设置为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>

#9

IE doesn't allow pressing the ENTER key for form submission if the submit button is not visible, and the form has more than one field. Give it what it wants by providing a 1x1 pixel transparent image as a submit button. Of course it will take up a pixel of the layout, but look what you have to do to hide it.

如果提交按钮不可见，IE不允许按下表单提交的ENTER键，并且表单有多个字段。通过提供一个1x1像素的透明图片作为提交按钮来满足它的需要。当然，它会占用布局的一个像素点，但是看看你需要做什么来隐藏它。

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

#10

The most elegant way of doing this is to keep the submit-button, but set it's border, padding and font-size to 0.

最优雅的方法是保持提交按钮，但将其边框、填充和字体大小设置为0。

This will make the button dimensions 0x0.

这将使按钮的尺寸为0x0。

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

You can try this yourself, and by setting an outline to the element you will see a dot, which is the outside border "surrounding" the 0x0 px element.

您可以自己尝试一下，通过设置元素的大纲，您将看到一个点，它是围绕0x0 px元素的外部边界。

No need for visibility:hidden, but if it makes you sleep at night, you can throw that in the mix as well.

不需要可见性:隐藏，但是如果它让你在晚上睡觉，你也可以把它融入其中。

JS Fiddle

JS小提琴

#11

This is my solution, tested in Chrome, Firefox 6 and IE7+:

这是我的解决方案，在Chrome、Firefox 6和IE7+中进行了测试:

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

#12

the simplest way

最简单的方法

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

#13

For those who have problems with IE and for others too.

对于那些与IE有问题的人以及其他人。

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

#14

You could try also this

你也可以试试这个。

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

You could include an image with width/height = 0 px

可以包含宽度/高度= 0 px的图像

#15

I added it to a function on document ready. If there is no submit button on the form (all of my Jquery Dialog Forms don't have submit buttons), append it.

我将它添加到准备好的文档的函数中。如果表单上没有提交按钮(我所有的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);
    });
}

#16

<input type="submit" style="display:none;"/>

This works fine and it is the most explicit version of what you're trying to achieve.

这很好，也是你想要实现的最明确的版本。

Note that there is a difference between display:none and visibility:hidden for other form elements.

请注意，display:none和visibility:hidden对于其他表单元素是有区别的。

#17

I've used

我使用

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

and

和

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

in the .css file. It worked magically for me too. :)

. css文件中。这对我来说也很神奇。:)

#1

208