Preventing “Enter” from submitting form, but allow it on textarea fields (jQuery) [duplicate]

Question

This question already has an answer here:

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

$(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?

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".

Answer 1

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

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

demo

Answer 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.

Answer 3

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

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

Answer 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 :)...

Answer 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.

Answer 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.

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

Answer 7

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

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