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

Question

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

Institutionalism

Answer 1

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.

Irvingirwin

This works well, as it's not conformed to only the 1st textarea. It covers all textareas on the page. Thanks heaps. – Accrue

Answer 2

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

Planometer

Didn't quite work - hitting enter on regular input fields submits the form, which is not what I want. – Institutionalism

@Institutionalism updated the answer with a demo also fixed the code – Planometer

Watching every enter event is kinda... ...overkill. I think that if you have a searchbox at the top of the page to, say, search the site, this will actually kill that searchbox's functionality.... Same for any other widgets that just happen to be nearby. – Jacindajacinta

@JosFaber glad that helped... – Planometer

You dont need e.preventDefault() because return false == e.preventDefault() && e.stopPropagation(), other than that +1 – Grime

How is watching every enter event overkill? Did u mean keypress? As long as you are letting the events bubble up to their target and you handle properly there is nothing wrong with keypress or enter. Adding the textarea logic is a simple indicator I love it – Grime

Enter key press should not be disabled on SELECT or BUTTON node names either, as this harms the site's accessibility for those using the keyboard to navigate. – Valediction

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

Harlan

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

Emblazon

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.

Jacindajacinta

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

Senator

Answer 7

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

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

Vernacularism

Because there are forms that are submitted by the input button type submit, so I can't supress that. not all submissions are javascript oriented (although most are due to form validation). – Institutionalism