jQuery: prevent form submition with enter key.

Question

I just wrote this nifty little function which works on the form itself...

$("#form").keypress(function(e){
    if (e.which == 13) {
       var tagName = e.target.tagName.toLowerCase(); 
       if (tagName !== "textarea") {
           return false;
       }
   }
}

In my logic I want to accept enters during input of a textarea. Also would be an added bonus to replace the enter key behavior of input fields with behavior to tab to the next input field (as if the tab key was pressed). Does anyone know of a way to use the event propagation model to correctly fire the enter key on the appropriate element, but prevent form submitting on it's press.

Answer 1

Set trigger for both the form and the inputs, but when the input events are triggered, stop the propagation to the form by calling the stopPropagation method.

By the way, IMHO, it's not a great thing to change default behaviors to anything any average user is used to - that's what make them angry when using your system. But if you insist, then the stopPropagation method is the way to go.

Answer 2

You can mimic the tab key press instead of enter on the inputs like this:

//Press Enter in INPUT moves cursor to next INPUT
$('#form').find('.input').keypress(function(e){
    if ( e.which == 13 )
    {
        $(this).next().focus();  //Use whatever selector necessary to focus the 'next' input
    }
});

You will obviously need to figure out what selector(s) are necessary to focus on the next input when Enter is pressed.

Answer 3

Here is a modified version of my function. It does the following:

1. Prevents the enter key from working on any element of the form other than the textarea, button, submit.
2. The enter key now acts like a tab.
3. preventDefault(), stopPropagation() being invoked on the element is fine, but invoked on the form seems to stop the event from ever getting to the element.

So my workaround is to check the element type, if the type is not a textarea (enters permitted), or button/submit (enter = click) then we just tab to the next thing.

Invoking .next() on the element is not useful because the other elements might not be simple siblings, however since DOM pretty much garantees order when selecting so all is well.

function preventEnterSubmit(e) {
    if (e.which == 13) {
        var $targ = $(e.target);

        if (!$targ.is("textarea") && !$targ.is(":button,:submit")) {
            var focusNext = false;
            $(this).find(":input:visible:not([disabled],[readonly]), a").each(function(){
                if (this === e.target) {
                    focusNext = true;
                }
                else if (focusNext){
                    $(this).focus();
                    return false;
                }
            });

            return false;
        }
    }
}

Answer 4

I just realized I was returning false on KeyUp event instead of KeyPress, which does not stop postback. I just thought I would mention this in case anyone was having the same problem I was having.