Capture keyDown for current page only - javascript

I have forms on different pages of my applications. Upon pressing 'Enter' or 'Esc', the form on the current page must be 'Submitted' or 'Cancelled'. The keydown() function should be triggered anywhere on the page and not tied to a specific DOM element.
.js
$(document).keydown(function(e) {
if(e.which == 13) {
// enter pressed
$('#submitCreateAccountForm').click();
$('#submitForm').click();
$('#submitNewSubmissionForm').click();
}
if(e.which == 27) {
// esc pressed
$('#submitCreateAccountFormCancel').click();
$('#submitFormCancel').click();
$('#submitNewSubmissionFormCancel').click();
}
});
What should 'document' be replaced by? Thanks

try this
$(function(){
$('html').bind('keypress', function (e) {
if (e.keyCode == 13) {
//do somethings
}
else if (e.keyCode == 27) {
return false;
}
});
});

You can try this code:
$("body").keyup(function(event){ // bind keyup event to body
if(event.keyCode == 13){ // 13 - code of enter key (find for ESC)
$("#enter").click(); // bind enter press for clicking botton with id="enter" and corresponding actions
}
});

Related

jQuery selector excluding other elements in events

I have a form that I want to prevent submit it when user press Enter
But there are 3 inputs that I want to exclude of this "rule".
Doing this I can prevent the submit event when Enter is pressed:
$(document).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
But how can I exclude my three inputs from this rules?
Here is what I tried out:
$(document).not("#input1", "#input2", "#input3").keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
And this other:
$(document).keydown(function(event){
if(event.keyCode == 13) {
if ($(event.target).is('#input1') == false || $(event.target).is('#input2') == false || $(event.target).is('#input3') == false) {
event.preventDefault();
return false;
}
}
});
My really intention is prevent enter on ALL inputs excluding that three inputs, but when Enter is pressed in one of that inputs I like to run a trigger().
Test whether the target is one of the elements you want to exclude. If this is true, return from the handler immediately. You also need to call event.stopPropagation(), otherwise the event will bubble out to other elements that aren't the excluded elements.
$(document).keydown(function(event) {
if (event.keyCode == 13) {
if ($(event.target).is("#input1,#input2,#input3")) {
event.stopPropagation();
return;
}
event.preventDefault();
return false;
}
}

Javascript only when cursor focus within textbox

Is it possible to run a JavaScript function only when the cursor focus is in a specific textarea?
I want to perform an action on keypress of the enter key, however I don't want this event listner to be in place just generally on the page, rather only when the cursor is in the textarea I have (id is postcontent)
As an example, the function I'm using is this:
function onEnter(){
if(characterCode == 13)
{
console.log("Enter pressed");
}
}
Just as a start while I work out the focus issue...
I also have jQuery at my disposal.
div1.onfocus=
function onEnter(){
if(characterCode == 13)
{
console.log("Enter pressed");
}
}
Here is an alternative:
var textArea = document.getElementById("postcontent");
textArea.addEventListener("keypress", handleKeyPress, false);
function handleKeyPress(e) {
var characterCode = e.charCode;
if (characterCode == 13) {
console.log("Enter pressed");
}
}
Fiddle

jQuery disabling submit-by-press on keyboard

I want to disable the "Enter" button on the keyboard so that when the user press enter to submit the form, nothing happens, and doing something else rather than submitting the form, such as alerting "Using keyboard is not allowed."
Here is what I have done, #calculator is a button:
$(document).ready(function(){
$("#calculator").keydown(function(){
console.log("Enter is disabled.");
return false;
});
});
Currently on its submission the form results unexpectedly (for instance redirects to the target page but without any CSS loaded.
$(document).on('keypress', function(e){
if(e.which == 13) {
e.preventDefault();
}
});
You can use .keypress() event to check which key was pressed then check the code of the key using e.keycode or e.which, if it's 13 then prevent submitting form:
$(document).keypress(function(e){
var code = e.keyCode || e.which;
if (code == 13 ) {
e.preventDefault();
return false;
}
});
For it, don't use submit button.
Use a div, style it like a button and submit the form using javascript on click of the div :)
Try this
For Disabling Keyboard
document.onkeydown = function (e) {
alert('Using keyboard is not allowed')
}
For Disabling Enter
$(document).on('keypress', function(e){
if(e.which == 13) {
e.preventDefault();
}
});

AJAX chat submission only working with $(document).keypress()

There's an input field for my ajax chat which should send data on enter press.
$("#chatfield").keypress(function(e) {
if(e.which == 13) {
chatsend($('#chatfield').val());
}
});
The code above won't work, only
$(document).keypress(function(e) {
if(e.which == 13) {
chatsend($('#chatfield').val());
}
});
But I don't want the code to listen the whole document for keypress event.
The input field has an id although it is not wrapped in a form element.
The short answer is to delegate.
$(document).on('keypress', '#chatfield', function(e) {
if(e.which == 13) {
chatsend($('#chatfield').val());
}
});

why is my button losing focus?

This is what I want to happen.. When a user hits 'enter' a 'SearchForItems()' should trigger. What is happening is another control, with 'other button', on the page gets focus returned to it anytime any other element is tabbed out of or after onkeyup.
I am having to force focus on the 'Search button' on page load, but after that any time enter is pressed the 'other button' is triggered. The 'other button' does not have a tab index assigned and is the pages default button.
I'm not sure if I've done a good job explaining this. Basically I want to know why focus is being shifted and how I can force the 'Search button' to trigger anytime enter is pressed.
this is one entry on my page where I'm trying to force the 'Search button' to trigger:
<td><input type="text" onkeydown="CheckForEnterKey(event)" id="AcceptedDate1" maxlength="7" style="width:121px;" value="<%=DateTime.Now.AddMonths(-3).ToString("MM/yyyy")%>"/> </td>
this is part of my jquery file where i'm also
$('#AcceptedDate1').keypress(function(e) { if (e.keyCode == 13 || e.which == 13) $('#SearchAcceptedLotsButton').click(); });
CheckForEnterKey Function
function CheckForEnterKey(e)
{
var keycode;
if(e.which)
{
keycode = e.which;
}
else
{
keycode = e.keyCode;
}
if(keycode == 13)
{
$('#SearchAcceptedLotsButton').click();//tried SearchForItems() also
}
}
Edit:
I just added this to my page and it appears to work, I added this to the main div thats holding everything together. What I need to do now is figure out where the enter was pressed so the enter is canceled everytime it is pressed within the main portion of my page. Any ideas, there are a lot of elements on my page?
function checkKey(e)
{
if(e.keyCode == 13 || e.which == 13)
{
e.returnValue = false;
e.cancel = true;
}
}
I am not sure why you are having problems. But I can offer you my onKeyDown code for pressing enter:
if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) { #DO JS HERE # }}
So I use it like this:
<input type="text" onKeyDown="if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) { alert('You pressed enter!'); }}">
In the above code whenever enter is pressed the id="SearchAcceptedLotsButton" can be triggered click as follows :
if(keycode == 13)
{
$('#SearchAcceptedLotsButton').trigger('click');
}
this is how I resolved the issue:
I added this function..
function checkKey(e)
{
if(e.keyCode == 13 || e.which == 13)
{
e.returnValue = false;
e.cancel = true;
SearchAcceptedLots();
}
}
At the top most div containing everything on the page I added this:
<div id="ItemPanel" onkeydown="checkKey(event)">
this catches every enter that is pressed within the form, canceling the default buttons behavior and calling the desired function.

Categories

Resources