Develop Reference

How I can detect Key "Enter" on "input" event? [duplicate]

I'm trying to do a function if enter is pressed while on specific input.
What I'm I doing wrong?
$(document).keyup(function (e) {
if ($(".input1").is(":focus") && (e.keyCode == 13)) {
// Do something
}
});
Is there a better way of doing this which would say, if enter pressed on .input1 do function?

$(".input1").on('keyup', function (e) {
if (e.key === 'Enter' || e.keyCode === 13) {
// Do something
}
});
// e.key is the modern way of detecting keys
// e.keyCode is deprecated (left here for for legacy browsers support)
// keyup is not compatible with Jquery select(), Keydown is.

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("input1")[0];
node.addEventListener("keyup", function(event) {
if (event.key === "Enter") {
// Do work
}
});
Modern style, with lambda and destructuring
node.addEventListener("keyup", ({key}) => {
if (key === "Enter") {
// Do work
}
})
If you must use jQuery:
$(document).keyup(function(event) {
if ($(".input1").is(":focus") && event.key == "Enter") {
// Do work
}
});
Mozilla Docs
Supported Browsers

$(document).keyup(function (e) {
if ($(".input1:focus") && (e.keyCode === 13)) {
alert('ya!')
}
});
Or just bind to the input itself
$('.input1').keyup(function (e) {
if (e.keyCode === 13) {
alert('ya!')
}
});
To figure out which keyCode you need, use the website http://keycode.info

Try this to detect the Enter key pressed in a textbox.
$(function(){
$(".input1").keyup(function (e) {
if (e.which == 13) {
// Enter key pressed
}
});
});

The best way I found is using keydown ( the keyup doesn't work well for me).
Note: I also disabled the form submit because usually when you like to do some actions when pressing Enter Key the only think you do not like is to submit the form :)
$('input').keydown( function( event ) {
if ( event.which === 13 ) {
// Do something
// Disable sending the related form
event.preventDefault();
return false;
}
});

It may be too late to answer this question. But the following code simply prevents the enter key. Just copy and paste should work.
<script type="text/javascript">
function stopRKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type=="text")) {return false;}
}
document.onkeypress = stopRKey;
</script>

The solution that work for me is the following
$("#element").addEventListener("keyup", function(event) {
if (event.key === "Enter") {
// do something
}
});

Try this to detect the Enter key pressed in a textbox.
$(document).on("keypress", "input", function(e){
if(e.which == 13){
alert("Enter key pressed");
}
});
DEMO

A solution that worked for me is this:
<input onkeydown="if (event.key == 'Enter'){//do logic}else{}">

$(document).ready(function () {
$(".input1").keyup(function (e) {
if (e.keyCode == 13) {
// Do something
}
});
});

This code handled every input for me in the whole site. It checks for the ENTER KEY inside an INPUT field and doesn't stop on TEXTAREA or other places.
$(document).on("keydown", "input", function(e){
if(e.which == 13){
event.preventDefault();
return false;
}
});

Here is what I did for my angular project:
HTML:
<input
class="form-control"
[(ngModel)]="searchFirstName"
(keyup)="keyUpEnter($event)"
/>
TypeScript:
keyUpEnter(event: KeyboardEvent) {
if (event.key == 'Enter') {
console.log(event);
}
}

Disable Browser Search and using my own search input on CTRL F

I am trying to disable the browser search functionlity and at the same time i want to focus my own custom search box in website.
here is code for the same.
document.addEventListener("keydown", function(e) {
if (e.keyCode == 70 && e.ctrlKey || e.keyCode === 114) {
document.getElementById("myInput").focus();
}
e.preventDefault();
})
it disable the browser search feature and focus my custom search bar but it does not allow me to type anything in my custom search input.

The preventDefault() should be used only if the relevant key is the ctrl+f:
document.addEventListener("keydown", function(e) {
if (e.keyCode == 70 && e.ctrlKey || e.keyCode === 114) {
document.getElementById("myInput").focus();
e.preventDefault();
}
})
<input id="myInput" />
Otherwise you prevent any keydown that use is doing...

keycode is now deprecated. Use this:
window.addEventListener("keydown", function(e) {
if ( (e.code == "0x0021" && e.key == "Control") || e.code == "0x003D") {
document.getElementById("myInput").focus();
e.preventDefault();
}
})
<input id="myInput" />

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"/>

jQuery keyboard activate a button

this is what I got so far
http://jsfiddle.net/qEKfg/
It's two buttons that activate on click and look like keyboard keys.
I'm trying to make it where they will only activate (animate) on a keyboard press of the related keys (CTRL and D)
This will make an 'animated buttons' effect for bookmarking my website, because CTRL+D is the hotkey to bookmark a page.
But I don't know how to set it up to work with keyboard keys in html or jQuery
if some could help I would be really REALLY grateful

The following should work for you. However, note that due to the window losing focus, I've added in a timer to release the on-screen 'buttons' after 5 seconds, as the window losing focus at that specific time prevents the keyup event from firing.
$(document).ready(function() {
var keys = [];
$(window).on('keydown keyup', function(e) {
if (e.type == "keydown") {
if (e.keyCode == 17 || e.keyCode == 91) {
$("a.a_demo_two:contains('CTRL')").addClass("active");
keys[0] = e.keyCode;
}
else if (e.keyCode == 68) {
$("a.a_demo_two:contains('D')").addClass("active");
keys[1] = 68;
};
if ((keys[0] == 17 || e.keyCode == 91) && keys[1] == 68) {
setTimeout(function() {
$('a.a_demo_two').removeClass("active");
}, 5000);
}
}
else {
if (e.keyCode == 17 || e.keyCode == 91) {
$("a.a_demo_two:contains('CTRL')").removeClass("active");
}
else if (e.keyCode == 68) {
$("a.a_demo_two:contains('D')").removeClass("active");
}
keys = [];
}
});
});​
DEMO

Basically you just put handler on keydown and keyup events and trigger whatever you want.
Something like that
$('body').on('keydown', function(e) {
console.log(e)
if (e.ctrlKey) $('.a_demo_two').trigger('mousedown')
if (e.keyCode === 100) $('.a_demo_two').trigger('mousedown')
});
$('body').on('keyup', function(e) {
console.log(e)
if (e.ctrlKey) $('.a_demo_two').trigger('mouseup')
if (e.keyCode === 100) $('.a_demo_two').trigger('mouseup')
});
​

Detect backspace and del on "input" event?

How to do that?
I tried:
var key = event.which || event.keyCode || event.charCode;
if(key == 8) alert('backspace');
but it doesn't work...
If I do the same on the keypress event it works, but I don't want to use keypress because it outputs the typed character in my input field. I need to be able to control that
my code:
$('#content').bind('input', function(event){
var text = $(this).val(),
key = event.which || event.keyCode || event.charCode;
if(key == 8){
// here I want to ignore backspace and del
}
// here I'm doing my stuff
var new_text = 'bla bla'+text;
$(this).val(new_text);
});
no character should be appended in my input, besides what I'm adding with val()
actually the input from the user should be completely ignored, only the key pressing action is important to me

Use .onkeydown and cancel the removing with return false;. Like this:
var input = document.getElementById('myInput');
input.onkeydown = function() {
var key = event.keyCode || event.charCode;
if( key == 8 || key == 46 )
return false;
};
Or with jQuery, because you added a jQuery tag to your question:
jQuery(function($) {
var input = $('#myInput');
input.on('keydown', function() {
var key = event.keyCode || event.charCode;
if( key == 8 || key == 46 )
return false;
});
});
​

event.key === "Backspace"
More recent and much cleaner: use event.key. No more arbitrary number codes!
input.addEventListener('keydown', function(event) {
const key = event.key; // const {key} = event; ES6+
if (key === "Backspace" || key === "Delete") {
return false;
}
});
Mozilla Docs
Supported Browsers

With jQuery
The event.which property normalizes event.keyCode and event.charCode. It is recommended to watch event.which for keyboard key input.
http://api.jquery.com/event.which/
jQuery('#input').on('keydown', function(e) {
if( e.which == 8 || e.which == 46 ) return false;
});

It's an old question, but if you wanted to catch a backspace event on input, and not keydown, keypress, or keyup—as I've noticed any one of these break certain functions I've written and cause awkward delays with automated text formatting—you can catch a backspace using inputType:
document.getElementsByTagName('input')[0].addEventListener('input', function(e) {
if (e.inputType == "deleteContentBackward") {
// your code here
}
});

keydown with event.key === "Backspace" or "Delete"
More recent and much cleaner: use event.key. No more arbitrary number codes!
input.addEventListener('keydown', function(event) {
const key = event.key; // const {key} = event; ES6+
if (key === "Backspace" || key === "Delete") {
return false;
}
});
Modern style:
input.addEventListener('keydown', ({key}) => {
if (["Backspace", "Delete"].includes(key)) {
return false
}
})
Mozilla Docs
Supported Browsers

Have you tried using 'onkeydown'?
This is the event you are looking for.
It operates before the input is inserted and allows you to cancel char input.

$('div[contenteditable]').keydown(function(e) {
// trap the return key being pressed
if (e.keyCode === 13 || e.keyCode === 8)
{
return false;
}
});

InputEvent.inputType can be used for Backspace detection Mozilla Docs.
It works on Chrome desktop, Chrome Android and Safari iOS.
<input type="text" id="test" />
<script>
document.getElementById("test").addEventListener('input', (event) => {
console.log(event.inputType);
// Typing of any character event.inputType = 'insertText'
// Backspace button event.inputType = 'deleteContentBackward'
// Delete button event.inputType = 'deleteContentForward'
})
</script>

on android devices using chrome we can't detect a backspace.
You can use workaround for it:
var oldInput = '',
newInput = '';
$("#ID").keyup(function () {
newInput = $('#ID').val();
if(newInput.length < oldInput.length){
//backspace pressed
}
oldInput = newInput;
})

//Here's one example, not sure what your application is but here is a relevant and likely application
function addDashesOnKeyUp()
{
var tb = document.getElementById("tb1");
var key = event.which || event.keyCode || event.charCode;
if((tb.value.length ==3 || tb.value.length ==7 )&& (key !=8) )
{
tb.value += "-"
}
}

Live demo
Javascript
<br>
<input id="input">
<br>
or
<br>
jquery
<br>
<input id="inpu">
<script type="text/javascript">
var myinput = document.getElementById('input');
input.onkeydown = function() {
if (event.keyCode == 8) {
alert('you pressed backspace');
//event.preventDefault(); remove // to prevent backspace
}
if (event.keyCode == 46) {
alert('you pressed delete');
//event.preventDefault(); remove // to prevent delete
}
};
//jquery code
$('#inpu').on('keydown', function(e) {
if (event.which == 8) {
alert('you pressed backspace');
//event.preventDefault(); remove // to prevent backspace
}
if (event.which == 46) {
alert('you pressed delete');
//event.preventDefault(); remove // to prevent delete
}
});
</script>