13

I have a form with a textfield inside and I am trying to disable the default behavior when the browser submits the whole form if the user presses Enter while the textfield is selected.

$('#recaptcha_response_field').keydown(function(event) { if (event.keyCode == 13) {
     event.preventDefault();
     event.stopPropagation();
     event.stopImmediatePropagation();
     alert("You Press ENTER key");
     return false;
   } 
});

Currently am getting "You Press ENTER key" and the default behavior isn't overridden.

MMM
  • 7,221
  • 2
  • 24
  • 42
user2288298
  • 149
  • 1
  • 1
  • 6
  • 1
    Don't use keydown event of input, use submit event of form. – A. Wolff Apr 17 '13 at 14:19
  • 1
    Duplicate http://stackoverflow.com/questions/585396/how-to-prevent-enter-keypress-to-submit-a-web-form Pls ask your question to google before submitting it here. this would have provided you with the original question that has already been answered at length. – iAmClownShoe Apr 17 '13 at 14:21
  • 1
    `preventDefault` is absolutely enough. Neither do you need to stop propagation, nor return false. – Bergi Apr 17 '13 at 14:22
  • See this post http://www.bloggingdeveloper.com/post/Disable-Form-Submit-on-Enter-Key-Press.aspx – asim-ishaq Apr 17 '13 at 14:22
  • @roasted but how could we know in onsubmit event that this form is submitted using enter key. – asim-ishaq Apr 17 '13 at 14:24
  • @roasted can you give a reason for your response? yes you can of course use the submit handler but why would you instead of keydown/keyup on the enter key? either would work here and you make it see as though you're saying keydown will NOT work. – iAmClownShoe Apr 17 '13 at 14:24
  • @iAmClownShoe I'm really not sure it is cross browser to stop submitting form from a keydown event on an input element. Maybe i'm wrong but... – A. Wolff Apr 17 '13 at 14:28
  • @iAmClownShoe I just tested and seems you cannot, so you need to use submit handler (tested in chrome) – A. Wolff Apr 17 '13 at 14:32
  • Ok, i tested on keyup doesn't work but works on keydown. Keyup is fired after submit, that's why. – A. Wolff Apr 17 '13 at 14:36
  • yes. keyup will of course fire afterwards so keydown is the one you must use. – iAmClownShoe Apr 17 '13 at 14:58
  • You should also handle `keyup` event. – Adeel Apr 17 '13 at 14:20

5 Answers5

26

Try this:

$(document).on("keypress", 'form', function (e) {
    var code = e.keyCode || e.which;
    if (code == 13) {
        e.preventDefault();
        return false;
    }
});

This will prevent the form submit on keypress

DEMO HERE

palaѕн
  • 72,112
  • 17
  • 116
  • 136
13

I found this and it works for me.

<input type="text" name="somename" id="someid" value="" onkeypress="return event.keyCode!=13">
dustysilicon
  • 131
  • 1
  • 2
9

To prevent the script from blocking the enter key on other elements such as on a textarea. Change the target from "form" to "input".

$(document).on("keypress", "input", function (e) {
    var code = e.keyCode || e.which;
    if (code == 13) {
        e.preventDefault();
        return false;
    }
});
Rob Powell
  • 1,367
  • 2
  • 13
  • 10
3

If none of the above solution is working for you , and you are using javascript anyway , why don't you use button type as 'button' <input type='button'> and submit it using javascript

$('#form_id').submit();
prabeen giri
  • 803
  • 7
  • 18
1

U can use this script to prevent enter on entire from.

<script type="text/javascript">
        $(document).on("keypress", 'form', function (e) {
            if (e.target.className.indexOf("allowEnter") == -1) {
                var code = e.keyCode || e.which;
                if (code == 13) {
                    e.preventDefault();
                    return false;
                }
            }
        });
    </script>

you put the classname to which control need to use enter

Wolf
  • 6,361
  • 2
  • 28
  • 25