How to detect pressing Enter on keyboard using jQuery?

Author : Code With Mark

Would you like to detect whether a user has pressed “Enter Key” using jQuery?

I am not sure if you ever come across this scenario or not.

I was working on a project in which I was making an Ajax call to submit form data. However, if a user hit the enter key while being in an input field, the whole page would reload. And that was not something I wanted to happen.

What I wanted happen was?

When my user hit enter key in any field,  I wanted jquery to trigger that enter key pressed and then call the submit process where I would validate the form data.

 jQuery Enter Key Plugin that worked for me:

$.fn.enterKey = function (fnc) 
{
    return this.each(function () 
    {
        $(this).keypress(function (ev) 
        {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if (keycode == '13') 
            {
                fnc.call(this, ev);
            }
        })
    })
}

 

 How to use jQuery Enter Key Plugin :

 
$('#YourElementID').enterKey(function (e) 
{
  //prevent the page from reloading 
  e.preventDefault();
  //Call the submit process
  $("#YourButtonClickTrigger").click();
}) 

$('.YourElementClassName').enterKey(function (e) 
{
  //prevent the page from reloading 
  e.preventDefault();
  //Call the submit process
  $(".YourButtonClassNameClickTrigger").click();
}) 

For me, I added a class(“UserForm”) to all my fields . This way the enter key jquery plugin would trigger no matter which field my user was in it.

$(".UserForm").enterKey(function (e) 
{
  //prevent the page from reloading 
  e.preventDefault();
  //Call the submit process
  $(".Btn_UserForm").click();
})

Try this small enter key jquery plugin in your projects

Sharing is caring:            

You might also like

How to create a Signup form registration

Introducing Awesome Functions Library

Learn how to easily unfollow all of your twitter followers in 3 seconds

Best Option For Hashing Your Passwords In PHP

Easily Find Out The Length Of Object, Array or String



Did you find this helpful?