We Keep Coding

How to listen the key pressed on all the document using JavaScript and Meteor template?

I have founded that if I want to listen on all the document I should do :
$(document).keydown(function(e) {
console.log(e);
console.log(e.keyCode);
if (e.keyCode == 27) {
$('#tftextinput').value="";
$('#tfbutton').click();
}
});
but it doesn't write anything in the console... So I have tried an other version like this:
$(".container.body").keydown(function(e) {
console.log(e);
console.log(e.keyCode);
if (e.keyCode == 27) {
$('#tftextinput').value="";
$('#tfbutton').click();
}
});
this code is in the $(document).ready(function() {});
but nothing happened too...
EDIT:
If I write this code in the web console it works:
So why it doesn't work in my Meteor template code ?
Template.home.onRendered(function() {
$(document).ready(function() {
/*
this method listen if we press "enter" in the research field and click on the button
*/
$('#tftextinput').keypress(function(e) {
if (e.keyCode == 13) {
$('#tfbutton').click();
}
});
$(document).keydown(function(e) {
console.log(e);
console.log(e.keyCode);
if (e.keyCode == 27) {
$('#tftextinput').value="";
$('#tfbutton').click();
}
});
});
});
the first listener works (the one who listens tftextinput)

Try on window
$(window).on("keydown",function(e) {
console.log(e);
console.log(e.keyCode);
if (e.keyCode == 27) {
$('#tftextinput').value="";
$('#tfbutton').click();
}
});

You could use Template events to do the same:
Template.home.events({
'keydown':function(event){
...
},
'keypress #tftextinput': function(event){
...
}
});

keypress event is not fired when we press enter key

I am facing a problem regarding to the keypress event. When I press the enter key then keypress event is not fired but it is working fine with the other keys.
Here is my code :
$(document).ready(function () {
alert('hi');
$("#ctl00_popupPageBody_txtFirstName,#ctl00_popupPageBody_txtLastName").keypress(function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
alert(code);
if (code == 13) { //Enter keycode
//Do something
}
});
});

You should use keyup event for this
$(document).ready(function() {
$("#ctl00_popupPageBody_txtFirstName,#ctl00_popupPageBody_txtLastName").keyup(function(e) {
if (e.which == 13) {
//Enter keycode //Do something
}
});
});

Use just e.which as its normalized across keys:
$(document).ready(function () {
alert('hi');
$("#ctl00_popupPageBody_txtFirstName,#ctl00_popupPageBody_txtLastName").keypress(function (e) {
var code = e.which;
alert(code);
if (code === 13) { //Enter keycode
e.preventDefault();
//your code goes here
}
});
});
Note: in my case I bind do .keydown

jQuery Crashes on .live("keyup")

I have some code here:
$(document).ready(function() {
$("#querybox").live("keyup", function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) {
$("#querybox").blur();
}
else {
search(document.getElementById('querybox').value);
}
/*if (document.getElementById('querybox').value == "") {
$("center").removeHighlight();
}*/
});
});
that detects a keyUp and uses it to search something. The problem is: when the #querybox is backspaced to the point where it is empty, the entire page crashes and I get the "Awwww, Snap!" message from Google Chrome.
I am using jQuery v1.7.2
Thx a million!
EDIT
I should also point out that the search() function highlights text in the body (notice the commented section). I am using the highlight plugin...
Search Fn:
function search(query) {
$("center").removeHighlight();
$(".paragraph").highlight(query);
$(".highlight").each(function (index) {
$(this).attr("id", "tmpforgoToByClassScrollhighlight" + index);
});
}

Try using .on(...) instead:
$("#querybox").on("keyup", function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
var queryBox = this;
if (code === 13) { // PRESSED ENTER
queryBox.blur();
}
else {
search(queryBox.val());
}
});
After your update:
You might want to look better into how you do your search functiom.
Cache some of those jQuery elements so you do not keep selecting them over and over on each keyup.
Also, I am not going through all of the .highlight code, but there probably is a bug in there that does not allow for an empty string, and that is why the website is causing the browser to crash.

You should use .delegate() instead
$(document).ready(function() {
//It will be a good advice to replace body with a parent element of #querybox
$("body").delegate("#querybox","keyup", function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) {
$("#querybox").blur();
}
else {
search(document.getElementById('querybox').value);
}
/*if (document.getElementById('querybox').value == "") {
$("center").removeHighlight();
}*/
});
});

Hiding a div on Mouse click out OR escape keyword press

I have the following code that hides my div (live search results) when mouse is clicked outside the div but I can't incorporate an OR function that does the same thing (hides div) when the escape key is pressed. Any help is much, much appreciated. Also, original code on mouse click out is from a different thread I got here on Stackoverflow. The or function is giving me a hard time.
var mouse_is_inside = false;
$(document).ready(function()
{
$('.form_content').hover(function(){
mouse_is_inside=true;
}, function(){
mouse_is_inside=false;
});
$("body").mouseup(function(){
if $('#display').hide();
});
});

This hides #display on pressing escape:
$(document).keyup(function(event) {
if(event.which === 27) {
$('#display').hide();
}
});
Example: http://jsfiddle.net/nsufH/
You could also try to use window instead of document:
$(window).keyup(function(event) {
if(event.which === 27) {
$('#display').hide();
}
});
Or try to use live:
$(document).live('keyup', function(event){
if(event.which === 27) {
$('#display').hide();
}
});

Basically you need to monitor for the KeyCode and act based off it:
$(document).keyup(function(e) {
if (e.keyCode == 27) { $('#display').hide() } // esc
});

$(document).ready(function() {
$(document).on('mouseup keyup', function(e){
var e = e || event,
code = (e.keyCode ? e.keyCode : e.which),
target = e.srcElement || e.target;
if (target.className != 'form_content' || code==27) {
$('#display').hide();
}
});
});

Here is the jsfiddle hiding a div on mouseout and ESC key press :
http://jsfiddle.net/jrm2k6/q2kNX/
Of course there is probably some stuff to do in the way to adapt it as your own source code..

Detect the Enter key in a text input field

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