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

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

Rafay · Answer 1 · 2012-03-12T18:22:54.287

11

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

edited Mar 12 '12 at 18:22

answered Mar 12 '12 at 17:21

Rafay

30,950
5
68
101

Didn't quite work - hitting enter on regular input fields submits the form, which is not what I want. – jeffkee Mar 12 '12 at 17:28
@jeffkee updated the answer with a demo also fixed the code – Rafay Mar 12 '12 at 17:41
2

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. – Kzqai Mar 12 '12 at 17:51
Very elegant global solution. Thanks! – Jos Aug 04 '15 at 14:03
@JosFaber glad that helped... – Rafay Aug 07 '15 at 21:39
You dont need e.preventDefault() because return false == e.preventDefault() && e.stopPropagation(), other than that +1 – yardpenalty.com Jul 24 '16 at 07:00
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 – yardpenalty.com Jul 24 '16 at 07:02
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. – jbob77435 Feb 23 '21 at 18:26

score 11 · Answer 2 · answered Mar 12 '12 at 17:41

11

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.

answered Mar 12 '12 at 17:41

The Alpha

143,660
29
287
307

2

This works well, as it's not conformed to only the 1st textarea. It covers all textareas on the page. Thanks heaps. – vr_driver Jan 30 '15 at 05:30

score 5 · Answer 3 · answered Mar 12 '12 at 17:26

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

score 2 · Answer 4 · answered Jan 20 '15 at 15:48

$('#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 :)...

score 1 · Answer 5 · answered Dec 03 '13 at 19:43

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

Kzqai · Answer 6 · 2012-03-12T17:54:33.557

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.

score 0 · Answer 7 · answered Mar 12 '12 at 17:21

0

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

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

answered Mar 12 '12 at 17:21

rjz

16,182
3
36
35

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). – jeffkee Mar 12 '12 at 17:27

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

7 Answers7

demo

Linked