如何禁用按下回车键时的自动提交行为？

Question

如何禁用按下回车键时的自动提交行为？

15

我想根据正在输入的文本内容，按回车键跳转到p2.htm或p3.htm。同时，我还想通过点击submit1按钮手动触发alert('no1')。

在FireFox中可以正常工作，但在IE6中，按回车键会提交submit按钮。

我如何使IE 6中的行为与FireFox相同？我使用JavaScript和jQuery。

<input id="Text2"  type="text"  onkeyup="if(event.keyCode==13){go2();}" /> 
<input id="Text3"  type="text"  onkeyup="if(event.keyCode==13){go3();}" /> 

<input id="submit1"  type="submit" value="submit" onclick="alert('no1')" />

<script type="text/javascript">
    function go2()
    {
        window.location = "p2.htm";
    }
    function go3()
    {
        window.location = "p3.htm";
    }
</script>

- Mike108

1

这里没看到任何jQuery... - Skilldrick

8个回答

27

<form onsubmit="return false"></form>

这将阻止表单在点击提交按钮或按下回车键后继续前往下一页。

- Jake Coxon

1

三年后，仍然拯救着这一天。没有比这更简单的了。 - Usman Mutawakil

4

如果我只想禁用回车键提交，但是希望保留点击提交怎么办？ - sumid

@sumid，在这种情况下，我下面的答案有帮助吗？ - WEFX

@WEFX：如果我理解正确，您的答案只适用于ASP。我正在使用PHP。 - sumid

12

这个被接受的解决方案存在问题，那就是常规提交按钮不再起作用，你必须编写所有的脚本按钮。

<form onsubmit="return false"></form>

这里有一个更好的解决方案，不会破坏非 JavaScript 提交按钮。该解决方案只是告诉浏览器在用户在表单输入框上按下回车键时不要执行默认行为。

// prevent forms from auto submitting on all inputs
$(document).on("keydown", "input", function(e) {
  if (e.which==13) e.preventDefault();
});

- user3612690

9

这个函数应该能解决问题：

function submitOnEnter(e, page) {
    var key;

    if (window.event)
        key = window.event.keyCode; //IE
    else
        key = e.which; //Firefox & others

    if(key == 13)
        window.location = page;
}

您应该这样调用它：

<input id="Text2"  type="text"  onkeyup="submitOnEnter(event, 'p2.html')" />

- Jojo

有一些错误，但是你的解决方案帮了我很多。 <input id="Text1" type="text" onkeypress="return submitOnEnter(event, 'p2.htm')" /> <input id="Text2" type="text" onkeypress="return submitOnEnter(event, 'p3.htm')" /> <input id="submit1" type="submit" value="提交" onclick="alert('no1')" />function submitOnEnter(e, page) { var key; if (window.event) key = window.event.keyCode; //IE else key = e.which; //Firefox & others

if(key == 13) {
    window.location = page;
    return false; //prevent auto hit submit button
}

} - Mike108

5

将输入类型从“submit”更改为“button”。

- Kon

1

当JS不可用时，请不要使其完全崩溃。在可行的基础上进行构建。http://icant.co.uk/articles/pragmatic-progressive-enhancement/ - Quentin

公平地说，OP被限制在JS解决方案中。 - Paul Alan Taylor

2

<%@taglib uri="/struts-tags"  prefix="s" %>
<html>
<head>
    <script type="text/javascript">
        function stopsubmit()
        {
            document.ourform.onsubmit="return true";
        }
        function pup()
        {
            return true;
        }
    </script>
</head>
<body>
    <form action="sa.jsp" name="ourform" onsubmit="return false">
        <s:submit action="" onclick="stopsubmit()" theme="simple"></s:submit>
    </form>
</body>

- suryaprakash pisay

0

你可以通过以下方式实现：

<script type="text/javascript">
    $(document).ready(function() {
       $(".div/formClass").bind("keypress", function(e) {
          if (e.keyCode == 13) {
             return false;
          }
       });
    });
</script>

- Sahi Repswal

0

如果您的表单具有多行文本字段（textarea），则此解决方案将在保留这些字段内的Enter键功能的同时，防止按下Enter键提交表单：

$(document).keypress(function disableEnterKey(event) {  // disable Enter key submit
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == '13' && event.target.tagName != 'TEXTAREA') {  // allow newlines
        return false;
    }
});

- Tawab Wakil

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- WEFX · Accepted Answer

如果使用MVC3，您可以通过编辑BeginForm调用来禁用通过Enter提交：

@using (Html.BeginForm("SomeAction", "SomeController", FormMethod.Post, new { onkeydown = "return event.keyCode!=13" }))
{
    ...
}