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

This question already has an answer here:

这个问题在这里已有答案:

• Prevent users from submitting a form by hitting Enter 27 answers

通过点击输入27个答案阻止用户提交表单

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

The above is the code I got which effectively kills the "enter" key as a form submitter throughout the system, which is exactly what I want. However, the enter key is also disabled on textarea tags - which the users should be able to hit enter on in order to go to the next rows. So is there a way to modify the above code to detect IF the enter is coming from within a textarea tag, it doesn't run the event.preventDefault(); line?

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

I have so many forms throughout the site - having to configure them individually would be a nightmare, and probably doesn't make sense - there's gotta be a universal way. The above code runs on every single page of the site to prevent accidental submits by hitting "enter". enter code here

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

7 个解决方案

#1

i would prefer the keyup event ... use the event.target property

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

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

demo

#2

You may try this

你可以试试这个

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

A fiddle is here.

这里有一个小提琴。

#3

@3nigma's solution would work just fine but here another way of achieving this behavior:

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

I edit from @The Alpha a bit, i use div for wysiwyg editors :)...

我从@The Alpha编辑了一下,我使用div作为所见即所得的编辑:)...

#5

This seems like a good opportunity to use the event object and a scalpel-like approach on this mosquito instead of a cannon-like approach.

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

In other words, something like this:

换句话说,这样的事情:

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

The advantage here should be relatively obvious, if you hit enter anywhere that doesn't submit a form, this code doesn't know, doesn't care, doesn't cause problems.

这里的优势应该是比较明显的,如果你在任何不提交表单的地方点击输入,这段代码不知道,不关心,不会引起问题。

#6

I have found this works best. Especially if you want to use enter key behaviors in other elements just not to send the form back. I am just expanding on 3nigma's answer.

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

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

#7

Why not just block the form's submit event from triggering instead?

为什么不阻止表单的提交事件触发?

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