How can I detect pressing Enter on the keyboard using jQuery?

JavascriptJqueryKeyboard EventsEnterJquery Events

Javascript Problem Overview

I would like to detect whether the user has pressed Enter using jQuery.

How is this possible? Does it require a plugin?

It looks like I need to use the keypress() method.

Are there browser issues with that command - like are there any browser compatibility issues I should know about?

Javascript Solutions

Solution 1 - Javascript

The whole point of jQuery is that you don't have to worry about browser differences. I am pretty sure you can safely go with enter being 13 in all browsers. So with that in mind, you can do this:

$(document).on('keypress',function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});

Solution 2 - Javascript

I wrote a small plugin to make it easier to bind the "on enter key pressed" event:

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

Usage:

$("#input").enterKey(function () {
    alert('Enter!');
})

Solution 3 - Javascript

I couldn't get the code posted by Paolo Bergantino to work, but when I changed it to $(document) and e.which instead of e.keyCode then I found it to work faultlessly.

$(document).keypress(function(e) {
    if(e.which == 13) {
        alert('You pressed Enter!');
    }
});

Link to example on JS Bin

Solution 4 - Javascript

I found this to be more cross-browser compatible:

$(document).keypress(function(event) {
    var keycode = event.keyCode || event.which;
    if(keycode == '13') {
	    alert('You pressed a "enter" key in somewhere');	
    }
});

Solution 5 - Javascript

You can do this using the jQuery 'keydown' event handler:

$("#start").on("keydown", function(event) {
  if(event.which == 13)
    alert("Entered!");
});

Solution 6 - Javascript

Use event.key and modern JavaScript!
$(document).keypress(function(event) {
    if (event.key === "Enter") {
        // Do something
    }
});

Or without jQuery:

document.addEventListener("keypress", function onEvent(event) {
    if (event.key === "Enter") {
        // Do something better
    }
});

Mozilla documentation

Supported Browsers

Solution 7 - Javascript

I came up with this solution:

$(document).ready(function(){

  $('#loginforms').keypress(function(e) {
    if (e.which == 13) {
    //e.preventDefault();
    alert('login pressed');
    }
  });

 $('#signupforms').keypress(function(e) {
    if (e.which == 13) {
      //e.preventDefault();
      alert('register');
    }
  });
});

Solution 8 - Javascript

There's a keypress() event method. The Enter key's ASCII number is 13 and is not dependent on which browser is being used.

Solution 9 - Javascript

A minor extension of Andrea's answer makes the helper method more useful when you may also want to capture modified enter presses (i.e., Ctrl + Enter or Shift + Enter). For example, this variant allows binding like:

$('textarea').enterKey(function() {$(this).closest('form').submit(); }, 'ctrl')

to submit a form when the user presses Ctrl + Enter with focus on that form's textarea.

$.fn.enterKey = function (fnc, mod) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if ((keycode == '13' || keycode == '10') && (!mod || ev[mod + 'Key'])) {
                fnc.call(this, ev);
            }
        })
    })
}

(See also https://stackoverflow.com/questions/1684196/ctrlenter-jquery-in-textarea.)

Solution 10 - Javascript

In some cases, you may need to suppress the ENTER key for a certain area of a page but not for other areas of a page, like the page below that contains a header <div> with a SEARCH field.

It took me a bit to figure out how to do this, and I am posting this simple yet complete example up here for the community.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test Script</title>
  <script src="/lib/js/jquery-1.7.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $('.container .content input').keypress(function (event) {
      if (event.keyCode == 10 || event.keyCode == 13) {
        alert('Form Submission needs to occur using the Submit button.');
        event.preventDefault();
      }
    });
  </script>
</head>
  <body>
    <div class="container">
      <div class="header">
        <div class="FileSearch">
          <!-- Other HTML here -->
        </div>
      </div>
      <div class="content">
        <form id="testInput" action="#" method="post">
        <input type="text" name="text1" />
        <input type="text" name="text2" />
        <input type="text" name="text3" />
        <input type="submit" name="Submit" value="Submit" />
        </form>
      </div>
    </div>
  </body>
</html>

Link to JSFiddle Playground: The [Submit] button does not do anything, but pressing ENTER from one of the Text Box controls will not submit the form.

Solution 11 - Javascript

Try this to detect the Enter key pressed.

$(document).on("keypress", function(e){
    if(e.which == 13){
        alert("You've pressed the enter key!");
    }
});

See demo @ detect enter key press on keyboard

Solution 12 - Javascript

As the keypress event isn't covered by any official specification, the actual behavior encountered when using it may differ across browsers, browser versions, and platforms.

$(document).keydown(function(event) {
  if (event.keyCode || event.which === 13) {
    // Cancel the default action, if needed
    event.preventDefault();
    // Call function, trigger events and everything you want to do. Example: Trigger the button element with a click
    $("#btn").trigger('click');
  }
})


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button id="btn" onclick="console.log('Button Pressed.')">&nbsp</button>

Solution 13 - Javascript

I used $(document).on("keydown").

On some browsers keyCode is not supported. The same with which so if keyCode is not supported you need to use which and vice versa.

$(document).on("keydown", function(e) {
  const ENTER_KEY_CODE = 13;
  const ENTER_KEY = "Enter";
  var code = e.keyCode || e.which
  var key = e.key
  if (code == ENTER_KEY_CODE || key == ENTER_KEY) {
    console.log("Enter key pressed")
  }
});


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Solution 14 - Javascript

$(document).keydown(function (event) {
      //proper indentiation of keycode and which to be equal to 13.
    if ( (event.keyCode || event.which) === 13) {
        // Cancel the default action, if needed
        event.preventDefault();
        //call function, trigger events and everything tou want to dd . ex : Trigger the button element with a click
        $("#btnsearch").trigger('click');
    }
});

Solution 15 - Javascript

$(document).keyup(function(e) {
    if(e.key === 'Enter') {
        //Do the stuff
    }
});

Solution 16 - Javascript

This my how I solved it. You should use return false;

$(document).on('keypress', function(e) {
    if(e.which == 13) {
        $('#sub_btn').trigger('click');
        alert('You pressed the "Enter" key somewhere');
        return false;
    }
});


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="" method="post" id="sub_email_form">
    <div class="modal-header">
        <button type="button" class="close" id="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Subscribe to our Technical Analysis</h4>
    </div>
    <div class="modal-body">
        <p>Signup for our regular Technical Analysis updates to review recommendations delivered directly in your inbox.</p>
        <div class="input-group">
            <input type="email" name="sub_email" id="sub_email" class="form-control" placeholder="Enter your email" required>
        </div>
        <span id="save-error"></span>
    </div>
    <div class="modal-footer">
        <div class="input-group-append">
            <input type="submit" class="btn btn-primary sub_btn" id="sub_btn" name="sub_btn" value="Subscribe">
        </div>
    </div>
</form>

Solution 17 - Javascript

The easy way to detect whether the user has pressed Enter is to use the key number. The Enter key number is equal to 13.

To check the value of key in your device:

$("input").keypress(function (e) {
  if (e.which == 32 || (65 <= e.which && e.which <= 65 + 25)
                    || (97 <= e.which && e.which <= 97 + 25)) {
    var c = String.fromCharCode(e.which);
    $("p").append($("<span/>"))
          .children(":last")
          .append(document.createTextNode(c));
  } else if (e.which == 8) {
    // Backspace in Internet Explorer only is on keydown
    $("p").children(":last").remove();
  }
  $("div").text(e.which);
});

By pressing the Enter key, you will get result as 13. Using the key value, you can call a function or do whatever you wish:

    $(document).keypress(function(e) {
      if(e.which == 13) {
        console.log("The user pressed the Enter key");

        // The code you want to run
      }
    });

If you want to target a button once the Enter key is pressed, you can use the code:

$(document).bind('keypress', function(e) {
  if(e.which === 13) { // Return
     $('#buttonname').trigger('click');
  }
});

Solution 18 - Javascript

I think the simplest method would be using vanilla JavaScript:

document.onkeyup = function(event) {
   if (event.key === 13){
     alert("Enter was pressed");
   }
}

Solution 19 - Javascript

$(function(){
  $('.modal-content').keypress(function(e){
	debugger
	 var id = this.children[2].children[0].id;
	   if(e.which == 13) {
		 e.preventDefault();
		 $("#"+id).click();
	   }
   })
});
Categories
Recommended Javascript Solutions
Recommended Jquery Solutions
Recommended Keyboard Events Solutions
Recommended Enter Solutions
Recommended Jquery Events Solutions

Previous Solution:

How to force cp to overwrite without confirmation

LinuxCommand LineOverwriteCp

Next Solution:

What's the purpose of the LEA instruction?

AssemblyX86X86 64X86 16

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionchrisView Question on Stackoverflow
Solution 1 - JavascriptPaolo BergantinoView Answer on Stackoverflow
Solution 2 - JavascriptAndreaView Answer on Stackoverflow
Solution 3 - JavascriptIan RokeView Answer on Stackoverflow
Solution 4 - JavascriptjesalView Answer on Stackoverflow
Solution 5 - JavascriptNasruddinView Answer on Stackoverflow
Solution 6 - JavascriptGiboltView Answer on Stackoverflow
Solution 7 - JavascriptSamuel Kwame AntwiView Answer on Stackoverflow
Solution 8 - JavascriptRichard SimõesView Answer on Stackoverflow
Solution 9 - JavascriptjoelnView Answer on Stackoverflow
Solution 10 - Javascriptjp2codeView Answer on Stackoverflow
Solution 11 - Javascriptjonathan klevinView Answer on Stackoverflow
Solution 12 - JavascriptZeinab_NsView Answer on Stackoverflow
Solution 13 - JavascriptJustin LiuView Answer on Stackoverflow
Solution 14 - JavascriptPrashanth GarlapallyView Answer on Stackoverflow
Solution 15 - JavascriptAzizAhmadView Answer on Stackoverflow
Solution 16 - JavascriptAnkit SinghView Answer on Stackoverflow
Solution 17 - Javascriptuser2216399View Answer on Stackoverflow
Solution 18 - JavascriptDuan WalkerView Answer on Stackoverflow
Solution 19 - JavascriptTayfun AçıkgözView Answer on Stackoverflow