How to detect when the user presses Enter in an input field
JavascriptJavascript Problem Overview
I only have 1 input field and I want to register onChange and onKeyPress event to detect when the users finish their input or press the Enter key. I need to use javascript only. Thanks for the help.
I have:
var load = function (){
//I want to trigger this function when user hit Enter key.
}
document.getElementById('co').onchange=load; //works great
document.getElementById('co').onKeyPress=load;
//not sure how to detect when user press Enter
html
//no form just a single input field
<input type='text' id='co'>
Javascript Solutions
Solution 1 - Javascript
document.getElementById('foo').onkeypress = function(e){
if (!e) e = window.event;
var keyCode = e.code || e.key;
if (keyCode == 'Enter'){
// Enter pressed
return false;
}
}
Solution 2 - Javascript
None of these answers as of yet specifically answer this question. The question is in 2 parts. 1. Enter is Pressed. 2. The uses is focused on an input.
Jquery
$('#input-id').on("keyup", function(e) {
if (e.keyCode == 13) {
console.log('Enter');
}
});
Vanilla JavaScript
inputId = document.getElementById('input-id');
inputId.addEventListener('keyup', function onEvent(e) {
if (e.keyCode === 13) {
console.log('Enter')
}
});
This way ENTER is only detected when the user presses enter FROM that input.
Solution 3 - Javascript
More recent and much cleaner: use event.key instead of event.keyCode. No more arbitrary number codes!
const node = document.getElementById('co');
node.addEventListener('keydown', function onEvent(event) {
if (event.key === "Enter") {
return false;
}
});
Solution 4 - Javascript
To make it cross browser:
document.getElementById('foo').onkeypress = function(e) {
var event = e || window.event;
var charCode = event.which || event.keyCode;
if ( charCode == '13' ) {
// Enter pressed
return false;
}
}
See this question for more details: https://stackoverflow.com/questions/3050984/javascript-event-e-which
Solution 5 - Javascript
use the event.keyCode
var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13) { //Enter keycode
//Do something
}
There is already a discussion in this link https://stackoverflow.com/questions/302122/jquery-event-keypress-which-key-was-pressed
Solution 6 - Javascript
Here is a good link that discusses this topic and provides a working examples
function DetectEnterPressed(e) {
var characterCode
if(e && e.which){ // NN4 specific code
e = e
characterCode = e.which
}
else {
e = event
characterCode = e.keyCode // IE specific code
}
if (characterCode == 13) return true // Enter key is 13
else return false
}
Solution 7 - Javascript
I use this code and it works fine:
document.getElementById("theIdHere").onkeypressed =
function() {
if(this.event.which === 13)
console('passed');
}
Solution 8 - Javascript
These day you can do it, in this way:
document.getElementById('co').addEventListener('keydown',
e => !e.repeat && e.keyCode === 13 && load());
Please notice that load() will run it once.