Develop Reference

Event listener doesn't work for Enter key

What may be the reason, that event listener of Enter key doesn't work?
I tried both plain JS:
addEventListener("keydown", function (e) {
if (e.keyCode === 13) {
enter(e);
}
});
function enter(e) {
event.preventDefault();
alert("You pressed enter");
}
and jQuery:
$(document).keypress(function(e) {
if(event.which == 13) {
event.preventDefault();
alert('You pressed enter!');
}
});
Also, I tried both event and e. Doesn't work. For another key, for example Backspace it works well.
That is a plugin for our corporate intranet - when you click some letter in email inbox, and after that press Enter, small pop-up window must be shown. But for some reason Enter is ignored in my script - instead of showing pop-up, webpage immediately opens the letter (that is a default behavior).
As I understand, the reason may be in another listener somewhere in webmail interface? Or not? If yes, may I somehow impart higher priority for handling Enter (so, before opening the letter, pop-up will be shown)?
Apologize for long description.

It should work as long as you bind the event handler within the document.ready
$(function(){
$(document).keypress(function(e) {
if(event.which == 13) {
event.preventDefault();
alert('You pressed enter!');
}
});
});
Here is a working sample

HTML input tag, cannot type

I have been struggling with this for a couple of days. I am pretty sure it's something simple, but I just can't see it.
On this page there is a form that users can use to send a message. Click on the grey Contact icon to see it.
The form used to work fine, but now I cannot type into any fields. Selecting an autocomplete value works though.
I have tried disabling some Javascript, adding a z-index value to the fields, but to no avail.
Can someone please take a look and tell me what might be the problem?
Thanks in advance.

You are too eager to restrict the user..
This code is the problem:
$(document).keydown(function(e){
if (e.keyCode == 39) {
//(...)
toggleArrows();
}
return false;
});
If the button IS NOT keyCode 39, you deny the button functionality.
Just remove the return false and your problem will be gone.
Edit: I just noticed you have 2 keydown events, one checking for keycode 37 and one for 39. Don't do that! You should do it this way:
$(document).keydown(function(e){
if (e.keyCode == 39) {
//(...)
}
else if (e.keyCode == 37) {
//(...)
}
});
And, again, get rid of the return false;.
JSFiddle to show the result: http://jsfiddle.net/xr2stb0k/
First checkbox is restricted with return false (except for the letter "a"), second one isn't.

How to submit the form in focus

Have you seen facebook comment box? I am trying to make a very similar comment box with textareas. for that I have many forms in my page beneath "wall posts". Each form has a class of comment-form and inside that form I have textarea for comment. each of those textarea has a class of comment-textarea.
I want to submit a comment on enter. for that I have a javascript
$('.comment-textarea').keypress(function(e){
if(e.which == 13 && e.shiftKey){
} else if(e.which == 13){
e.preventDefault();
$('.comment-form').trigger('submit');
}
});
but since i have many forms in the page, I don't know how to submit the form which is on focus.

There 2 solutions. Solution 1 give every form a unique ID so you can target it. Use the comment-textarea to find the form like this :
$('.comment-textarea').keypress(function(e){
if(e.which == 13 && e.shiftKey){
} else if(e.which == 13){
e.preventDefault();
$(this).closest('.comment-form').trigger('submit');
}
});
This will find the first parent with the class "comment-form"

You could use .closest():
$(this).closest('.comment-form').trigger('submit');
The function .closest() goes up one level (like .parent()) to see if the class .comment-form exists there, and if it doesn't find it, it repeats the process another level up, and again and again until it finds something (if there's anything to find at all).

form should not submit on enter if focus is not on submit button

I have a requirement where user cannot submit the form if he press enter key unless focus will be on submit button.
Using following code, I am able to do that, but now the issue is, if I have any enter key event attached specific to any field (e.g. if I want to attach enter key event to one textfield for some special requirement), it is not allowing me due to the script I have written below..
<script>
$(document).keydown(function(event) {
if (event.keyCode == 13) {
var $focusedItem = $(document.activeElement);
if($focusedItem.is("button") || $focusedItem.is("a") || $focusedItem.attr("type") == "submit") {
$focusedItem.click();
}
else {
event.preventDefault();
}
}
});
</script>
Any solution where I can restrict user from submitting form on pressing enter key, if focus is not on the submit button but at the same time if there will be any enter key event attached to any form-field, that should also work.

If you had created a JsFiddle it would be easier to help. However, I'm thinking you should do something like this:
if($focusedItem.attr('id') == 'submitButton') {
if (event.keyCode == 13) {
submit the form
}
}else if ($focusedItem.attr('id') == 'Anothertextarea') {
if (event.keyCode == 13) {
do something special
}
}else{
if (event.keyCode == 13) {
return null;
}
}

Remove the line event.stopPropagation(); from your script, you need only the preventDefault() (prevents the submit).
When you do stopPropagation() you are stopping all other keypress events on the element.

Try that and see if it fits your needs:
--DEMO--
$(document).on('submit', 'form', function (e) {
e.preventDefault();
}).on('click', ':submit', function (e) {
if (!$(document.activeElement).is(':submit')) return;
var form = $(this).closest('form').length ? $(this).closest('form')[0] : $('#' + $(this).attr('form'))[0];
form.submit();
});

Maybe I'm missing the point, this is basically a standard html issue.
Don't give the form an submit action (move it to a click event directly on the button) and change all button types to button instead of submit.
I can't remember if simply removing the submit from the form is enough. If not then just do onSubmit="return false;" I think that does it.
However as a note the requirement for this as a global behavior is probably wrong and if its for the government then you will probably get in trouble since its not compliant with accessibility guidelines.

How to handle keypress of default button?

I thought I'd handle not clicking on my default button (which is on my asp.net master page) by checking if enter was pressed and handling it. Basically when users were on any input type fields and they hit enter, it would actually execute the event of my default button on my form (as mentioned it is a button on my master page that allows for a global search).
So users were like hey wait a minute i hit the enter key on an input field why am I suddenly on a search results page....I dont blame them...
I thought I'd handle it with this:
$(document).keypress(function (e) {
if (e.which == 13) {
return false;
}
});
Which the problem no longer happened, and I was happy...until I found out all my buttons on for instance my jquery dialog no longer executed when you tabbed to them and hit the enter key...Well I see the reason why because I'm returning false. But how should I structure this so this does not happen if you are focused in on a for example asp.net button?

You should only on handle textboxes
$('input[type=text]').keypress(function (e) {
if (e.which == 13) {
return false;
}
});
EDIT
As per comment, Can I add this in my site.master page but ignore one specific text box
Excluding a textfield
$('input[type=text]').not('.search').keypress(function (e) {
if (e.which == 13) {
return false;
}
});
Here I have include a demonstration, In last textbox (search) event is not associated.
Use Event Delegation Approach
$(document).on('keypress', 'input[type=text]:not(.search)', function (e) {
if (e.which == 13) {
alert('Enter pressed')
}
});
DEMO

You need to bind even to exact element on page:
$('.aspNetButton').on('keypress', (function (e) {
if (e.which == 13) {
return false;
}
});