Develop Reference

Detect Enter keypress in html input without jquery

I just want to detect the enter input keypress on my android device. I found out that using jquery, we can do like below:
$('#inputText').keypress(function(event) {
var keycode = event.keyCode || event.which;
if(keycode == '13') {
alert('You pressed a "enter" key in somewhere');
}
});
But I don't want to use jquery. I want to use the traditional way like using
document.getElementById('inputText')
But I don't know how to add in the keypress event function. Do you guys have any idea?

Almost the same as in jQuery. Use eventListener and pass an argument e to the function to catch the event and it's keyCode.
var elem = document.getElementById('inputText');
elem.addEventListener('keypress', function(e){
if (e.keyCode == 13) {
console.log('You pressed a "enter" key in somewhere');
}
});
<input id='inputText'>

document.getElementById("id").onKeyDown = function(event) {
if (event.keycode === 13) {
alert("return pressed");
}
};

Use event.key instead of event.keyCode!
const node = document.getElementById('inputText');
node.addEventListener('keydown', function onEvent(event) {
if (event.key === "Enter") {
// Do something
}
});
Mozilla Docs
Supported Browsers

You can use
document.getElementById('txtBox').onkeypress = function(e) {
if (!e) e = window.event;
var keyCode = e.keyCode || e.which;
if (keyCode == '13') {
alert("Enter Pressed");
}
}
<input id="txtBox" type="text" />

You can use addEventListener
document.getElementById('inputText').addEventListener("keypress", function() {});

Do this :
<form onsubmit="Search();" action="javascript:void(0);">
<input type="text" id="searchCriteria" placeholder="Search Criteria"/>
<input type="button" onclick="Search();" value="Search" id="searchBtn"/>

Trigger <button> when pressing the Enter key in text input

I'm making a search bar with the text-bar as an tag, and the search-button as a , the reason I use a instead of is because I'm using a picture of a magnifying glass on the button, an when I use it doesn't want to position itself properly.
Here is my HTML:
<form id="search-form" href="#test1" class="smoothscroll">
<input type="text" id="searchText" onClick="this.select();" placeholder="Search..."/>
<button type="button" id="searchButton">
<img src="magnify.png" id="magnify"/>
</button>
</form>
And here is the jquery:
$(document).ready(function () {
$("#searchButton").click(function () {
var text = document.getElementById('searchText').value;
$("html, body").animate({
scrollTop: ($('#' + text).offset().top)
}, 2000);
});
$("#searchText").keyup(function (event) {
if (event.keyCode == 13) {
$("#searchButton").click();
}
});
});
Thank you for helping.

As per the docs, You should use .which instead of keyCode:
$("#searchText").keyup(function(event){
if(event.which == 13){
$("#searchButton").click();
}
// Make sure the form isn't submitted
event.preventDefault();
});
To determine which key was pressed, examine the event object that is
passed to the handler function. While browsers use differing
properties to store this information, jQuery normalizes the .which
property so you can reliably use it to retrieve the key code.

Try this
$("#searchText").keyup(function (event) {
var code= event.keyCode ? event.keyCode : event.which;
// or use simply, var code= event.keyCode || event.which;
if (code == 13) {
$("#searchButton").click();
}
});
Demo

$("#searchText").keyup(function(event){
if (event.which === 13) {
$("#searchButton").trigger("click");
}
});
also see Javascript .keyCode vs. .which?

How can I disable the ENTER key on my textarea?

<form name='qform'>
<textarea name='q' rows='3' cols='60' wrap='hard' id='q' onkeydown="if (event.keyCode == 13) document.getElementById('clickit').click()"></textarea>
<input type='button' value='search' id='clickit' onclick="get();">
</form>
I have this form... it doesn't have a submit button because I am using jquery and under this form is a div area where the results will be shown. It is a search engine that does not have an input box but instead has a textarea. This is because it will be a multiple word searcher.
The problem is that if I press enter, the query is submitted and everything is ok ... but the focus on textarea goes down one line and that is a problem for me.
Basically I want the enter to have that one function only(submit) end nothing else.

$(document).ready(function() {
$('textarea').keypress(function(event) {
if (event.keyCode == 13) {
event.preventDefault();
}
});
});

Why not just use <input type="text"> if you don't want multiple lines? You mentioned it will be a "multiple word searcher". Why does this require a <textarea>?
Update
Try this
$('textarea').bind('keypress', function(e) {
if ((e.keyCode || e.which) == 13) {
$(this).parents('form').submit();
return false;
}
});

In the jquery function, use event.preventdefault and next do what you like.
For example
<script>
$("a").click(function(event) {
event.preventDefault();
//Do your logic here
});
</script>
http://api.jquery.com/event.preventDefault/

Pure javascript:
document.addEventListener('keypress', function (e) {
if (e.keyCode === 13 || e.which === 13) {
e.preventDefault();
return false;
}
})

Prevent form submission on Enter key press

I have a form with two text boxes, one select drop down and one radio button. When the enter key is pressed, I want to call my JavaScript function, but when I press it, the form is submitted.
How do I prevent the form from being submitted when the enter key is pressed?

if(characterCode == 13) {
// returning false will prevent the event from bubbling up.
return false;
} else{
return true;
}
Ok, so imagine you have the following textbox in a form:
<input id="scriptBox" type="text" onkeypress="return runScript(event)" />
In order to run some "user defined" script from this text box when the enter key is pressed, and not have it submit the form, here is some sample code. Please note that this function doesn't do any error checking and most likely will only work in IE. To do this right you need a more robust solution, but you will get the general idea.
function runScript(e) {
//See notes about 'which' and 'key'
if (e.keyCode == 13) {
var tb = document.getElementById("scriptBox");
eval(tb.value);
return false;
}
}
returning the value of the function will alert the event handler not to bubble the event any further, and will prevent the keypress event from being handled further.
NOTE:
It's been pointed out that keyCode is now deprecated. The next best alternative which has also been deprecated.
Unfortunately the favored standard key, which is widely supported by modern browsers, has some dodgy behavior in IE and Edge. Anything older than IE11 would still need a polyfill.
Furthermore, while the deprecated warning is quite ominous about keyCode and which, removing those would represent a massive breaking change to untold numbers of legacy websites. For that reason, it is unlikely they are going anywhere anytime soon.

Use both event.which and event.keyCode:
function (event) {
if (event.which == 13 || event.keyCode == 13) {
//code to execute here
return false;
}
return true;
};

event.key === "Enter"
More recent and much cleaner: use event.key. No more arbitrary number codes!
NOTE: The old properties (.keyCode and .which) are Deprecated.
const node = document.getElementsByClassName("mySelect")[0];
node.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
event.preventDefault();
// Do more work
}
});
Modern style, with lambda and destructuring
node.addEventListener("keydown", ({key}) => {
if (key === "Enter") // Handle press
})
Mozilla Docs
Supported Browsers

If you're using jQuery:
$('input[type=text]').on('keydown', function(e) {
if (e.which == 13) {
e.preventDefault();
}
});

Detect Enter key pressed on whole document:
$(document).keypress(function (e) {
if (e.which == 13) {
alert('enter key is pressed');
}
});
http://jsfiddle.net/umerqureshi/dcjsa08n/3/

Override the onsubmit action of the form to be a call to your function and add return false after it, ie:
<form onsubmit="javascript:myfunc();return false;" >

A react js solution
handleChange: function(e) {
if (e.key == 'Enter') {
console.log('test');
}
<div>
<Input type="text"
ref = "input"
placeholder="hiya"
onKeyPress={this.handleChange}
/>
</div>

So maybe the best solution to cover as many browsers as possible and be future proof would be
if (event.which === 13 || event.keyCode === 13 || event.key === "Enter")

Here is how you can do it using JavaScript:
//in your **popup.js** file just use this function
var input = document.getElementById("textSearch");
input.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
alert("yes it works,I'm happy ");
}
});
<!--Let's say this is your html file-->
<!DOCTYPE html>
<html>
<body style="width: 500px">
<input placeholder="Enter the text and press enter" type="text" id="textSearch"/>
<script type="text/javascript" src="public/js/popup.js"></script>
</body>
</html>

Below code will add listener for ENTER key on entire page.
This can be very useful in screens with single Action button eg Login, Register, Submit etc.
<head>
<!--Import jQuery IMPORTANT -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!--Listen to Enter key event-->
<script type="text/javascript">
$(document).keypress(function (e) {
if (e.which == 13 || event.keyCode == 13) {
alert('enter key is pressed');
}
});
</script>
</head>
Tested on all browsers.

A jQuery solution.
I came here looking for a way to delay the form submission until after the blur event on the text input had been fired.
$(selector).keyup(function(e){
/*
* Delay the enter key form submit till after the hidden
* input is updated.
*/
// No need to do anything if it's not the enter key
// Also only e.which is needed as this is the jQuery event object.
if (e.which !== 13) {
return;
}
// Prevent form submit
e.preventDefault();
// Trigger the blur event.
this.blur();
// Submit the form.
$(e.target).closest('form').submit();
});
Would be nice to get a more general version that fired all the delayed events rather than just the form submit.

A much simpler and effective way from my perspective should be :
function onPress_ENTER()
{
var keyPressed = event.keyCode || event.which;
//if ENTER is pressed
if(keyPressed==13)
{
alert('enter pressed');
keyPressed=null;
}
else
{
return false;
}
}

A little simple
Don't send the form on keypress "Enter":
<form id="form_cdb" onsubmit="return false">
Execute the function on keypress "Enter":
<input type="text" autocomplete="off" onkeypress="if(event.key === 'Enter') my_event()">

Using TypeScript, and avoid multiples calls on the function
let el1= <HTMLInputElement>document.getElementById('searchUser');
el1.onkeypress = SearchListEnter;
function SearchListEnter(event: KeyboardEvent) {
if (event.which !== 13) {
return;
}
// more stuff
}

<div class="nav-search" id="nav-search">
<form class="form-search">
<span class="input-icon">
<input type="text" placeholder="Search ..." class="nav-search-input" id="search_value" autocomplete="off" />
<i class="ace-icon fa fa-search nav-search-icon"></i>
</span>
<input type="button" id="search" value="Search" class="btn btn-xs" style="border-radius: 5px;">
</form>
</div>
<script type="text/javascript">
$("#search_value").on('keydown', function(e) {
if (e.which == 13) {
$("#search").trigger('click');
return false;
}
});
$("#search").on('click',function(){
alert('You press enter');
});
</script>

native js (fetch api)
document.onload = (() => {
alert('ok');
let keyListener = document.querySelector('#searchUser');
//
keyListener.addEventListener('keypress', (e) => {
if(e.keyCode === 13){
let username = e.target.value;
console.log(`username = ${username}`);
fetch(`https://api.github.com/users/${username}`,{
data: {
client_id: 'xxx',
client_secret: 'xxx'
}
})
.then((user)=>{
console.log(`user = ${user}`);
});
fetch(`https://api.github.com/users/${username}/repos`,{
data: {
client_id: 'xxx',
client_secret: 'xxx'
}
})
.then((repos)=>{
console.log(`repos = ${repos}`);
for (let i = 0; i < repos.length; i++) {
console.log(`repos ${i} = ${repos[i]}`);
}
});
}else{
console.log(`e.keyCode = ${e.keyCode}`);
}
});
})();
<input _ngcontent-inf-0="" class="form-control" id="searchUser" placeholder="Github username..." type="text">

<form id="form1" runat="server" onkeypress="return event.keyCode != 13;">
Add this Code In Your HTML Page...it will disable ...Enter Button..

Cross Browser Solution
Some older browsers implemented keydown events in a non-standard way.
KeyBoardEvent.key is the way it is supposed to be implemented in modern browsers.
which
and keyCode are deprecated nowadays, but it doesn't hurt to check for these events nonetheless so that the code works for users that still use older browsers like IE.
The isKeyPressed function checks if the pressed key was enter and event.preventDefault() hinders the form from submitting.
if (isKeyPressed(event, 'Enter', 13)) {
event.preventDefault();
console.log('enter was pressed and is prevented');
}
Minimal working example
JS
function isKeyPressed(event, expectedKey, expectedCode) {
const code = event.which || event.keyCode;
if (expectedKey === event.key || code === expectedCode) {
return true;
}
return false;
}
document.getElementById('myInput').addEventListener('keydown', function(event) {
if (isKeyPressed(event, 'Enter', 13)) {
event.preventDefault();
console.log('enter was pressed and is prevented');
}
});
HTML
<form>
<input id="myInput">
</form>
https://jsfiddle.net/tobiobeck/z13dh5r2/

Use event.preventDefault() inside user defined function
<form onsubmit="userFunction(event)"> ...
function userFunction(ev)
{
if(!event.target.send.checked)
{
console.log('form NOT submit on "Enter" key')
ev.preventDefault();
}
}
Open chrome console> network tab to see
<form onsubmit="userFunction(event)" action="/test.txt">
<input placeholder="type and press Enter" /><br>
<input type="checkbox" name="send" /> submit on enter
</form>

I used document on, which covers dynamically added html after page load:
$(document).on('keydown', '.selector', function (event) {
if (event.which == 13 || event.keyCode == 13) {
//do your thang
}
});
Added updates from #Bradley4

Submitting a form on 'Enter' with jQuery?

I have a bog-standard login form - an email text field, a password field and a submit button on an AIR project that's using HTML/jQuery. When I hit Enter on the form, the entire form's contents vanish, but the form isn't submitted. Does anyone know if this is a Webkit issue (Adobe AIR uses Webkit for HTML), or if I've bunged things up?
I tried:
$('.input').keypress(function (e) {
if (e.which == 13) {
$('form#login').submit();
}
});
But that neither stopped the clearing behavior, or submitted the form. There's no action associated with the form - could that be the issue? Can I put a javascript function in the action?

$('.input').keypress(function (e) {
if (e.which == 13) {
$('form#login').submit();
return false; //<---- Add this line
}
});
Check out this stackoverflow answer:
event.preventDefault() vs. return false
Essentially, "return false" is the same as calling e.preventDefault and e.stopPropagation().

In addition to return false as Jason Cohen mentioned. You may have to also preventDefault
e.preventDefault();

Don't know if it will help, but you can try simulating a submit button click, instead of directly submitting the form. I have the following code in production, and it works fine:
$('.input').keypress(function(e) {
if(e.which == 13) {
jQuery(this).blur();
jQuery('#submit').focus().click();
}
});
Note: jQuery('#submit').focus() makes the button animate when enter is pressed.

Return false to prevent the keystroke from continuing.

Is there any reason you have to hook and test for the enter key?
Couldn't you simply add a
<input type="submit" />
to your form and have it naturally be submitted when enter is pushed? You could even then hook the form's onsubmit action and call a validation function from there if you wanted...
You could even use the onsubmit as a test to see if your form is being submitted, but it won't work if you call form.submit().

Here's a way to do this as a JQuery plugin (in case you want to re-use the functionality):
$.fn.onEnterKey =
function( closure ) {
$(this).keypress(
function( event ) {
var code = event.keyCode ? event.keyCode : event.which;
if (code == 13) {
closure();
return false;
}
} );
}
Now if you want to decorate an <input> element with this type of functionality it's as simple as this:
$('#your-input-id').onEnterKey(
function() {
// Do stuff here
} );

You can also simply add onsubmit="return false" to the form code in the page to prevent the default behaviour.
Then hook (.bind or .live) the form's submit event to any function with jQuery in the javascript file.
Here's a sample code to help:
HTML
<form id="search_form" onsubmit="return false">
<input type="text" id="search_field"/>
<input type="button" id="search_btn" value="SEARCH"/>
</form>
Javascript + jQuery
$(document).ready(function() {
$('#search_form').live("submit", function() {
any_function()
});
});
This is working as of 2011-04-13, with Firefox 4.0 and jQuery 1.4.3

This is my code:
$("#txtMessage").on( "keypress", function(event) {
if (event.which == 13 && !event.shiftKey) {
event.preventDefault();
$("#frSendMessage").submit();
}
});

Also to maintain accessibility, you should use this to determine your keycode:
c = e.which ? e.which : e.keyCode;
if (c == 13) ...

Just adding for easy implementation. You can simply make a form and then make the submit button hidden:
For example:
<form action="submit.php" method="post">
Name : <input type="text" name="test">
<input type="submit" style="display: none;">
</form>

I use now
$("form").submit(function(event){
...
}
At first I added an eventhandler to the submit button which produced an error for me.

I found out today the keypress event is not fired when hitting the Enter key, so you might want to switch to keydown() or keyup() instead.
My test script:
$('.module input').keydown(function (e) {
var keyCode = e.which;
console.log("keydown ("+keyCode+")")
if (keyCode == 13) {
console.log("enter");
return false;
}
});
$('.module input').keyup(function (e) {
var keyCode = e.which;
console.log("keyup ("+keyCode+")")
if (keyCode == 13) {
console.log("enter");
return false;
}
});
$('.module input').keypress(function (e) {
var keyCode = e.which;
console.log("keypress ("+keyCode+")");
if (keyCode == 13) {
console.log("Enter");
return false;
}
});
The output in the console when typing "A Enter B" on the keyboard:
keydown (65)
keypress (97)
keyup (65)
keydown (13)
enter
keyup (13)
enter
keydown (66)
keypress (98)
keyup (66)
You see in the second sequence the 'keypress' is missing, but keydown and keyup register code '13' as being pressed/released.
As per jQuery documentation on the function keypress():
Note: 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.
Tested on IE11 and FF61 on Server 2012 R2

As it may be late
but you can add below line in html:-
<input onkeyup="submitForm(event)" oninput="addTextName(this)" type="text" id="name-val">
and add this on js file
function submitForm(e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode == 13){
toggleNextScreen();
}
}
keycode 13 means enter

In HTML codes:
<form action="POST" onsubmit="ajax_submit();return false;">
<b>First Name:</b> <input type="text" name="firstname" id="firstname">
<br>
<b>Last Name:</b> <input type="text" name="lastname" id="lastname">
<br>
<input type="submit" name="send" onclick="ajax_submit();">
</form>
In Js codes:
function ajax_submit()
{
$.ajax({
url: "submit.php",
type: "POST",
data: {
firstname: $("#firstname").val(),
lastname: $("#lastname").val()
},
dataType: "JSON",
success: function (jsonStr) {
// another codes when result is success
}
});
}

$('form#login').keypress(function (e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode == 13)
{
e.preventDefault();
$('form#login').submit();
return false;
}
});

Try this:
var form = document.formname;
if($(form).length > 0)
{
$(form).keypress(function (e){
code = e.keyCode ? e.keyCode : e.which;
if(code.toString() == 13)
{
formsubmit();
}
})
}