Prevent Enter Key Submitting Forms With JQuery - Code

Có thể bạn quan tâm

Home
Articles
JQuery
Prevent Enter Key Submitting Forms With JQuery

Copied to clipboard Prevent Enter Key Submitting Forms With JQuery Note: This post is over two years old and so the information contained here might be out of date. If you do spot something please leave a comment and we will endeavour to correct. 15th July 2011 - 3 minutes read time

A common practice that some users have is to press the enter key when they are filling in forms on the web. This might be when they are just moving to the next field, but the trouble is that this will submit the form.

To prevent this from happening you can simply stop the form being submitted if the enter key had been pressed. This is done by binding a JQuery event to the input elements of the form and returning false if the key pressed is enter, which has the keyCode value of 13. We also include a call to the JQuery method preventDefault() to stop the event propagating.

$('form input').keydown(function (e) { if (e.keyCode == 13) { e.preventDefault(); return false; } });

Taking this a step further it might be an idea to try and achieve what the users are expecting and jump the focus to the next element in the form. Due to security restrictions it is impossible to change the key that was pressed to a tab, but the event we are looking for can be easily simulated. All we need to do it find all the input elements in the form, figure out where the current element is and then focus on the next input element (if it exists). The following code does just this.

$('form input').keydown(function (e) { if (e.keyCode == 13) { var inputs = $(this).parents("form").eq(0).find(":input"); if (inputs[inputs.index(this) + 1] != null) { inputs[inputs.index(this) + 1].focus(); } e.preventDefault(); return false; } });JavaScriptJQuery Phil Norton speaking at a conference

Phil Norton

Phil is the founder and administrator of #! code and is an IT professional working in the North West of the UK.

Graduating in 2003 from Aberystwyth University with an MSc in Computer Science Phil has previously worked as a database administrator, on an IT help desk, systems trainer, web architect, usability consultant, blogger and SEO specialist. Phil has lots of experience building and maintaining PHP websites as well as working with associated technologies like JavaScript, HTML, CSS, XML, Flex, Apache, MySQL and Linux

Want to know more? Need some help

Let us help! Hire us to provide training, advice, troubleshooting and more.

Support Us!

Please support us and allow us to continue writing articles.

Become a Patron!

GitHub Sponsorship

Comments

You are going to stop people also from pressing Enter on "Submit"?

Change:

$('form input').keydown(function (e) {

to:

$('form input:not([type="submit"])').keydown(function(e) {

Submitted by Azizur Rahman on Mon, 07/18/2011 - 11:30

Permalink

thanks for the code , it help me alot, thanks again

Submitted by Israel R on Fri, 01/06/2012 - 20:24

Permalink

I can submit this form bt pressing teh Enter key when in a text input field (i.e if I use the Enter key instead of the tab key to move from one field to the next. I tried to prevent this on my site using teh Jquery on this page but it did not work for me either. Is there a better way ?

Chhers

Richard

Submitted by Anonymous on Wed, 02/22/2012 - 21:29

Permalink I'm starting with jquery and this article has helped me a lot. Thank you for writing it.

Submitted by Django developer on Fri, 11/03/2017 - 10:09

Permalink

Awesome :)

Submitted by Paritosh Singh on Fri, 09/27/2019 - 19:40

Permalink

Thanks

Submitted by Anonymous on Wed, 11/10/2021 - 08:11

Permalink

I made a font-size slider that works great. It indicates the size with a txt. You can click the text and it will change into an input field so you can omit the slider and directly input the font-size. On blur it will set the slider & fontsize. The last step was to implement key action (enter) to blur the field and set the values. But the page where I am using it (a wordpress code-snippet plugin page) binds the enter action to 'save' the code-snippet. So now my code works, upon enter key it sets the size you input in the field, but it also saves the snippet. So I took your example, and tried adding e.preventDefault(), but it still also saves the snippet, I guess that save action isn't default. Can you tell me how I can unbind that save action? Working jsfiddle: http://jsfiddle.net/junkfood66/e3y0jn2z/50/

Submitted by Pampus™ on Fri, 12/02/2022 - 15:12

Permalink

Hi Pampus™, Thanks for reading and commenting!

I think this article might help you: https://www.hashbangcode.com/article/inspecting-and-reusing-jquery-even…

It sounds like you need to rebind an event that's already been added to the page. That code should help you do just that.

NamePhilip Norton

Submitted by philipnorton42 on Fri, 12/02/2022 - 15:34

Permalink