I would like to detect whether the user has pressed Enter using jQuery.
How is this possible? Does it require a plugin?
EDIT: It looks like I need
I wrote a small plugin to make it easier to bind the "on enter key pressed" a 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!');
})
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>
You can do this using the jquery 'keydown' event handle
$( "#start" ).on( "keydown", function(event) {
if(event.which == 13)
alert("Entered!");
});
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.
The easy way to detect whether the user has pressed enter is to use key number the enter key number is =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 IE only be 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("User entered Enter key");
// the code you want to run
}
});
if you want to target a button once enter key is pressed you can use the code
$(document).bind('keypress', function(e){
if(e.which === 13) { // return
$('#butonname').trigger('click');
}
});
Hope it help
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