防止“输入”提交表单，但允许在 textarea 字段（jQuery）[重复]

Posted 2023-05-07

【中文标题】防止“输入”提交表单，但允许在 textarea 字段（jQuery）[重复]

【英文标题】：Preventing "Enter" from submitting form, but allow it on textarea fields (jQuery) [duplicate]

【发布时间】：2012-03-29 03:00:17

【问题描述】：

$(window).keydown(function(event)
    if(event.keyCode == 13) 
      event.preventDefault();
      return false;
    
  );

上面是我得到的代码，它有效地杀死了整个系统中作为表单提交者的“输入”键，这正是我想要的。但是，textarea 标签上的回车键也被禁用 - 用户应该能够按回车键进入下一行。那么有没有办法修改上面的代码来检测输入是否来自textarea 标记，它不运行event.preventDefault(); 行？

我在整个网站上有这么多表单 - 必须单独配置它们将是一场噩梦，而且可能没有意义 - 必须有一个通用的方式。上面的代码在站点的每个页面上运行，以防止通过点击“输入”意外提交。

【参考方案1】：

你可以试试这个

$(document).ready(function()
    $(window).keydown(function(event)
        if(event.keyCode == 13 && event.target.nodeName!='TEXTAREA')
        
          event.preventDefault();
          return false;
        
    );
);

小提琴是here。

【讨论】：

这很好用，因为它不只符合第一个文本区域。它涵盖了页面上的所有文本区域。谢谢大家。

【参考方案2】：

我更喜欢keyup 事件...使用event.target 属性

$(window).keydown(function(event)
    if((event.which== 13) && ($(event.target)[0]!=$("textarea")[0])) 
      event.preventDefault();
      return false;
    
  );

demo

【讨论】：

不太奏效 - 在常规输入字段上按 Enter 会提交表单，这不是我想要的。

@jeffkee 用演示更新了答案，也修复了代码

观看每一个进入事件有点... ...矫枉过正。我认为如果您在页面顶部有一个搜索框来搜索网站，这实际上会破坏该搜索框的功能......对于碰巧在附近的任何其他小部件也是如此。

非常优雅的全局解决方案。谢谢！

@JosFaber 很高兴能帮上忙...

【参考方案3】：

@3nigma 的解决方案可以正常工作，但这里有另一种实现此行为的方法：

$(function()
    $('#myform').find('input,select').keydown(function(event)
        if ( event.keyCode == 13 )
            event.preventDefault();
        
    );
);

【参考方案4】：

$('#form_editar').keypress(function(e) 
    var allowEnter = "textarea": true, "div": true;
    var nodeName = e.target.nodeName.toLowerCase();

    if (e.keyCode == 13 && allowEnter[nodeName] !== true) 
        e.preventDefault();
    
);

我从@The Alpha 进行了一些编辑，我将 div 用于所见即所得的编辑器 :)...

【参考方案5】：

这似乎是一个在这只蚊子上使用事件对象和类似手术刀的方法而不是类似大炮的方法的好机会。

换句话说，是这样的：

...
// Only watch for a bad type of submission when a submission is requested.
$('form .contact-form').submit(function(e)
    // If a submit is requested, and it's done via keyboard enter, stop it.
    if ((e.keyCode || e.which) == 13) ? ;) // Try to use normalized enter key code
        e.preventDefault(); // Prevent the submit.
    
    // All other mouse actions just go through.
);

这里的优势应该是比较明显的，如果在不提交表单的任何地方敲回车，这段代码不知道，不关心，不会造成问题。

【参考方案6】：

我发现这个效果最好。特别是如果您想在其他元素中使用输入键行为而不是发回表单。我只是在扩展 3nigma 的答案。

 $("form").keypress(function (event) 
            if (event.keyCode == 13 && ($(event.target)[0]!=$("textarea")[0])) 
                return false;
            
        );

【参考方案7】：

为什么不直接阻止表单的submit 事件触发呢？

$('form').submit(function(event)
  event.preventDefault();
);

【讨论】：

因为有些表单是通过输入按钮类型提交提交的，所以我无法抑制。并非所有提交都是面向 javascript 的（尽管大多数是由于表单验证）。