Question

我有jQuery去了所有带有按钮类的提交按钮，并将它们分别变成带有类按钮的锚元素。

$("input.button").each(function(i) {

    var anchorButton = $("<a class='"+this.className+"' href='#'>"+this.value+"</a>")



    anchorButton.click(function(eventObject) {

        $(this).blur().prev("input.hidden").click();

        return false;

    });



    $(this)

        .after(anchorButton)

        .addClass("hidden")

        .removeClass("button pill-left pill-center pill-right");

});

然后我可以使用CSS设置锚元素的样式，跨浏览器。只有一个问题。每当我在表单输入元素上按Enter键时，表单都不会提交。但是，如果我取消隐藏提交按钮，它会再次起作用。总之，我无法通过Enter / Return键提交表单，除非我有一个可见的提交按钮（显示！=无）。

当我隐藏提交按钮时，如何在按Enter键时提交表单？

Answer 1

$("input.button").keydown(function(event) {
   if(event.keyCode == 13)
      $("...find the form...").submit();
});

这应该有用。

如果没有尝试这个：

   $("..find the input button you hide..").css('position', 'absolute')
         .css('top', '-1000px');

这比建议的visibility: hidden解决方案更好，因为如果您将可见性设置为隐藏按钮仍然会“占用空间”。

Answer 2

只需在HTML中使用普通form，包括提交action属性。然后，您将获得浏览器的默认行为，并在表单中按 Enter 将提交。然后，您不必使用jQuery将事件处理程序绑定到所有提交按钮。

您可以使用此JSBin进行测试。

Answer 3

您是否尝试将可见性更改为隐藏而不是显示为无？

Answer 4

尝试visibility = hidden

如何使用Enter键提交表单而不提交按钮

4 个答案: