jquery禁用表单提交

Posted 2023-02-22

【中文标题】jquery禁用表单提交

【英文标题】：jquery disable form submit on enter

【发布时间】：2012-06-29 10:34:40

【问题描述】：

我的页面中有以下 javascript，但似乎无法正常工作。

$('form').bind("keypress", function(e) 
  if (e.keyCode == 13)                
    e.preventDefault();
    return false;
  
);

我想禁用在输入时提交表单，或者更好的是，调用我的 ajax 表单提交。任何一种解决方案都是可以接受的，但我上面包含的代码不会阻止表单提交。

【问题讨论】：

这是一个简单的纯 html 解决方案：***.com/a/51507806/337934

【参考方案1】：

$('form').keyup(function(e) 
  return e.which !== 13  
);

event.which 属性规范了 event.keyCode 和 event.charCode。键盘按键输入建议观看 event.which。

which docs.

【参考方案2】：

如果keyCode没有被抓到，抓到which：

$('#formid').on('keyup keypress', function(e) 
  var keyCode = e.keyCode || e.which;
  if (keyCode === 13)  
    e.preventDefault();
    return false;
  
);

编辑：错过了，最好使用keyup 而不是keypress

编辑 2：在某些较新版本的 Firefox 中，不会阻止表单提交，将 keypress 事件添加到表单也更安全。此外，仅将事件绑定到表单“名称”但仅绑定到表单 ID，它也不起作用（不再？）。因此，我通过适当更改代码示例使这一点更加明显。

编辑 3：将 bind() 更改为 on()

【讨论】：

jQuery 将其规范化为 e.which，因此您无需测试 e.keyCode，但最可能导致此问题的原因是 +1。

你需要return false;吗？ e.preventDefault(); 似乎足够了

重要！此解决方案块在 textarea 中中断。

问题是如果我有一个相同形式的文本框，现在我不能在文本框中添加一个输入（创建一个新行）。

keyCode === 13 && !$(e.target).is('textarea')

【参考方案3】：

当您关注输入元素时，通常会在 Enter 上提交表单。

我们可以在表单中的输入元素上禁用 Enter 键（代码13）：

$('form input').on('keypress', function(e) 
    return e.which !== 13;
);

演示： http://jsfiddle.net/bnx96/325/

【讨论】：

ios Go 按钮是我在自定义自动完成输入字段上的问题。这解决了它。

这可以防止 enter 键在同一表单内的textareas 中使用。使用 $("form input") 而不是 $("form :input") 似乎可以解决它。演示：jsfiddle.net/bnx96/279

【参考方案4】：

更短：

$('myform').submit(function() 
  return false;
);

【讨论】：

但这也会阻止用户点击？

@haibuihoang 是的，这将禁用表单提交。

您应该使用function(e) e.preventDefault();，因为事件处理程序中的返回值已被弃用：***.com/a/20045473/601386

@user1111929 这确实很好用，但它不应该是最佳答案，因为该问题仅询问Enter 而不是通过Submit 按钮禁用表单提交。

如果您决定使用 jQuery onClick 事件来验证表单，您可能希望保留表单提交，但在按下“输入”键时禁用提交，这是一种常见情况，并且仍然使用 jQuery 提交。换句话说，有些情况下您只想通过 javascript/jQuery 提交。虽然您仍然可以在此解决方案中使用 AJAX，但它会禁用 submit 方法的基本功能。

【参考方案5】：

这个怎么样：

$(":submit").closest("form").submit(function()
    $(':submit').attr('disabled', 'disabled');
);

这应该会禁用应用中所有带有提交按钮的表单。

【参考方案6】：

以下代码将取消使用 enter 键提交表单，但仍允许您在 textarea 中使用 enter 键。您可以根据需要对其进行进一步编辑。

<script type="text/javascript">
        function stopRKey(evt) 
          var evt = (evt) ? evt : ((event) ? event : null);
          var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
          if ((evt.keyCode == 13) && ((node.type=="text") || (node.type=="radio") || (node.type=="checkbox")) )  return false;
        

        document.onkeypress = stopRKey;
</script> 

【参考方案7】：

如果您只想在输入和提交按钮上禁用提交，请使用表单的 onsubmit 事件

<form onsubmit="return false;">

您可以将“return false”替换为对 JS 函数的调用，该函数将执行任何需要的操作，并将表单作为最后一步提交。

【讨论】：

这将禁用所有表单提交，包括点击提交按钮。

不是 100%...工作定期提交密钥...最好使用 jquery 来防止

很好的替代答案（带有上述警告），因为...好吧，有时这就是您所需要的。

这正是我需要的情况，谢谢

【参考方案8】：

$(document).on('keyup keypress', 'form input[type="text"]', function(e) 
  if(e.which == 13) 
    e.preventDefault();
    return false;
  
);

此解决方案适用于网站上的所有表单（也适用于使用 ajax 插入的表单），仅防止在输入文本中输入。把它放在一个文档准备函数中，一辈子忘掉这个问题。

【参考方案9】：

我不知道您是否已经解决了这个问题，或者是否有人正在尝试解决这个问题，但是，这是我的解决方案！

$j(':input:not(textarea)').keydown(function(event)
    var kc = event.witch || event.keyCode;
    if(kc == 13)
    event.preventDefault();
        $j(this).closest('form').attr('data-oldaction', function()
            return $(this).attr('action');
        ).attr('action', 'javascript:;');

        alert('some_text_if_you_want');

        $j(this).closest('form').attr('action', function()
            return $(this).attr('data-oldaction');
        );
        return false;
    
);

【参考方案10】：

在Firefox中，当您输入并按Enter键时，它将提交其上层形式。解决方案是在将提交表单中添加：

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

【参考方案11】：

必须捕获和测试 ENTER 键的每个击键的过度杀伤力真的让我很烦恼，所以我的解决方案依赖于以下浏览器行为：

按 ENTER 将在提交按钮上触发 click 事件（在 IE11、Chrome 38、FF 31 中测试） ** （参考：http://mattsnider.com/how-forms-submit-when-pressing-enter/）

所以我的解决方案是删除标准提交按钮（即<input type="submit">），这样上述行为就会失败，因为在按下 ENTER 时没有提交按钮可以神奇地单击。相反，我在常规按钮上使用 jQuery 单击处理程序通过 jQuery 的 .submit() 方法提交表单。

<form id="myform" method="post">
  <input name="fav_color" type="text">
  <input name="fav_color_2" type="text">
<button type="button" id="form-button-submit">DO IT!</button>
</form>

<script>
 $('#form-button-submit').click(function()
    $('#myform').submit();
  );
</script>

演示：http://codepen.io/anon/pen/fxeyv?editors=101

** 如果表单只有 1 个输入字段并且该字段是“文本”输入，则此行为不适用；在这种情况下，即使 HTML 标记中没有提交按钮（例如搜索字段），表单也会按 ENTER 键提交。这是自 90 年代以来的标准浏览器行为。

【讨论】：

我添加了一个不可见的输入框来应对“表单只有一个输入字段并且该字段是'文本'输入”引起的“表单将按ENTER键提交”。

【参考方案12】：

3 年后，没有一个人能完全回答这个问题。

提问者想取消默认的表单提交，调用自己的Ajax。这是一个带有简单解决方案的简单请求。无需截取每个输入的每个字符。

假设表单有一个提交按钮，无论是<button id="save-form"> 还是<input id="save-form" type="submit">，请执行以下操作：

$("#save-form").on("click", function () 
    $.ajax(
        ...
    );
    return false;
);

【参考方案13】：

适用于所有浏览器的 JavaScript 完整解决方案

上面的代码和大部分解决方案都很完美。 但是，我认为最喜欢的一个“简短答案”是不完整的。

所以这是完整的答案。在原生支持 IE 7 的 JavaScript 中。

var form = document.getElementById("testForm");
form.addEventListener("submit",function(e)e.preventDefault(); return false;);

此解决方案现在将阻止用户使用 enter 键提交，并且不会重新加载页面，或将您带到页面顶部，如果您的表单位于下方。

【讨论】：

如果您单击“提交”按钮，这也会阻止提交表单。

@MarioWerner 如果你看这个问题，它特别说是为了避免提交表单。这就是这段代码的目的。所以用户不希望表单提交单个表单，这就是为什么这应该起作用。是的，这不适用于表单提交，因为用户想要对任何类型的提交操作进行操作。

@TarandeepSingh 不，标题和问题说“禁用表单提交on enter”

【参考方案14】：

您可以在纯 Javascript 中完美地做到这一点，简单且不需要库。这是我对类似主题的详细回答： Disabling enter key for form

简而言之，代码如下：

<script type="text/javascript">
window.addEventListener('keydown',function(e)if(e.keyIdentifier=='U+000A'||e.keyIdentifier=='Enter'||e.keyCode==13)if(e.target.nodeName=='INPUT'&&e.target.type=='text')e.preventDefault();return false;,true);
</script>

此代码仅用于防止输入 type='text' 的“Enter”键。 （因为访问者可能需要在页面上按回车键）如果您还想禁用其他操作的“回车”，您可以添加 console.log(e);出于您的测试目的，并在 chrome 中按 F12，转到“控制台”选项卡并在页面上按“退格键”并查看其内部以查看返回的值，然后您可以定位所有这些参数以进一步增强代码以上以满足您对 "e.target.nodeName"、"e.target.type" 和还有很多...

【讨论】：

其实应该是e.target.nodeName === 'INPUT' && e.target.type !== 'textarea'。使用指定的代码，如果选中单选框或复选框，它将允许提交表单。

【参考方案15】：

上面的大多数答案都会阻止用户在 textarea 字段中添加新行。如果这是您想要避免的事情，您可以通过检查当前哪个元素具有焦点来排除这种特殊情况：

var keyCode = e.keyCode || e.which;
if (keyCode === 13 && !$(document.activeElement).is('textarea')) 
  e.preventDefault();
  return false;

【参考方案16】：

当文件完成（加载完成）时，脚本会检测“Entry”键的每个事件并禁用后面的事件。

<script>
            $(document).ready(function () 
                $(window).keydown(function(event)
                    if(event.keyCode == 13) 
                        e.preventDefault(); // Disable the " Entry " key
                        return false;               
                    
                );
            );
        </script>

【讨论】：

添加一些解释

@HaveNoDisplayName ：已更新。

【参考方案17】：

简单的方法是将按钮的类型更改为按钮 - 在 html 中，然后在 js 中添加事件...

从此改变：

<form id="myForm">
   <button type="submit">Submit</button>
</form>

到

<form id="myForm">
   <button type="button" id="btnSubmit">Submit</button>
</form>

并在js或jquery中添加：

$("#btnSubmit").click(function () 
    $('#myForm').submit();
);

【参考方案18】：

听说which不推荐，所以把Best rated answer改成这个。

$('#formid').on('keyup keypress', function(e) 
  if (e.key === 'Enter')  
    e.preventDefault();
    return false;
  
);

参考。 https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which

【参考方案19】：

$('#FormID').on('keyup keypress', function (e) 
        var keyCode = e.keyCode || e.which;
        if (keyCode === 13) 
            e.preventDefault();
            return false;
        
    );

【讨论】：

请解释您的解决方案。

【参考方案20】：

这是一个简单的 JavaScript 解决方案没有使用不同的变体处理 keydown 或 keypress 事件：

document.forms[0].addEventListener('submit', function(e) 
    if(document.activeElement.getAttribute('type') !== 'submit') 
        e.preventDefault();
    
);

仅当页面上的活动元素是提交按钮时才会提交表单。 因此，您可以通过单击提交按钮或在提交按钮获得焦点时按 ENTER 键来提交表单。