Develop Reference

How to fix keypress event for enter key that is running a function twice while only being called once

I am creating a tip calculator. I have a button on the page that calculates the tip if you press it or if you press enter on the keyboard. When I press the enter key, the function that calculates the tip runs but then it runs again even though I did not call it again anywhere in my code. The odd thing is, is that the second time it runs, it goes into the variable where the function is stored and runs the function. I don't know why it goes into a variable that wasn't called.
I tried debugging to see if I missed a step and if I called the function twice somewhere, but I didn't.
Here is the keypress event:
document.addEventListener('keypress', function(event) {
if (event.keycode === 13 || event.which === 13) {
calculateTip();
}
Then right after that code is the calculateTip variable:
var calculateTip = function() {
some code that does calculations
}
After the key is pressed, calculateTip is executed, then it goes straight into the above variable to run calculateTip again.
I have my code inside an IIFE. I already tested to see if the code outside of this IIFE affected anything, it doesn't. The 'click' event listener works perfectly and only executes the calculateTip function once.
In this version of my code, calculateTip will print 'test' to the console twice if enter is clicked.
The IIFE:
var controller = (function(calcCtrl, UICtrl) {
var setupEventListeners = function() {
var DOM = UICtrl.getDOMstrings();
document.querySelector(DOM.button).addEventListener('click', calculateTip);
document.addEventListener('keypress', function(event) {
if (event.keycode === 13 || event.which === 13) {
calculateTip();
}
});
};
var calculateTip = function() {
console.log('test')
};
return {
init: function() {
setupEventListeners();
}
}
})(calculateController, UIController);
controller.init();

with jquery you can solve it
$(document).unbind('keypress').bind('keypress', function (e) {
if (e.keycode === 13 || e.which === 13) {
calculateTip();
}
});

Just add event.preventDefault(); inside the callback, it helped me.
document.addEventListener('keypress', function(event) {
if (event.keycode === 13 || event.which === 13) {
event.preventDefault();
calculateTip();
}
}

It's give one time would you please check this out.
<script type="text/javascript">
document.addEventListener('keypress', function(event) {
if (event.keycode === 13 || event.which === 13) {
calculateTip();
}
});
var calculateTip = function() {
console.log("enter clicked");
}
</script>

Try to put the following to your event listener function:
event.stopImmediatePropagation();

Run function on enter press

I have a jQuery button function that works properly and executes the code inside, what I want is when I press the Enter on the search box, it will execute the same function inside the onclick one. I don't want to copy paste the entire code of my function to the on Enter press event because that will be the wrong way to do it. This is the click event:
$("#checkScout").click(function(e){
...
}
And this is the one I tried with the on enter press
var enterKey = document.getElementById("addChannelsToScout");
enterKey.addEventListener("keydown", function (e) {
if (e.keyCode === 13) {
$("#checkScout").click(function (e);
}
});

it should be just
$("#checkScout").click();
so
$('#addChannelsToScout').keydown(function (e) {
if (e.which == 13) {
$("#checkScout").click();
//$("#checkScout").trigger('click');
}
})
Demo: Fiddle

Try:
$("#checkScout").trigger('click');
Trigger Performance

Change:
$("#checkScout").click(function(e);
To:
$("#checkScout").click();
Your code:
var enterKey = document.getElementById("addChannelsToScout");
enterKey.addEventListener("keydown", function (e) {
if (e.keyCode === 13)
{
$("#checkScout").click();//modified here
}
});

just this will work $("#checkScout").click();
var enterKey = document.getElementById("addChannelsToScout");
enterKey.addEventListener("keydown", function (e) {
if (e.keyCode === 13)
{
$("#checkScout").click();
}
});

actually you need to trigger the event. since it is already been handled it will perform the task that you have written in the event
Check Triggers here http://api.jquery.com/trigger/
$("#checkScout").trigger("click");

How to stop of running the keycodes 37 and 39 when there is a textarea selected

Simply I have a js script that change the page with left and right arrows, but how to stop that if a specific textarea is selected ?
This is my js to change the page
$(document).keydown(function(event) {
if(event.keyCode === 37) {
window.location = "http://site.com/pics/5";
}
else if(event.keyCode === 39) {
window.location = "http://site.com/pics/7";
}
});

$('textarea').on('keypress', function(evt) {
if ((evt.keyCode === 37) || (evt.keyCode === 39)) {
console.log('stop propagation');
evt.stopPropagation();
}
});
See example fiddle: http://jsfiddle.net/GUDqV/1
Update: after OP clarification this works even on jQuery 1.2.6 on Chrome: http://jsfiddle.net/GUDqV/2/
$('textarea').bind('keyup', function(evt) {
if ((evt.keyCode === 37) || (evt.keyCode === 39)) {
console.log('stop propagation');
evt.stopPropagation();
}
});​
see screenshot of this code on Chrome and jQ1.2.6

Probably the simplest approach is to factor event.target into your code, checking to see if it is the textarea:
$(document).keydown(function(event) {
if (event.target.id == "myTextArea") {
return true;
}
else if(event.keyCode === 37) {
window.location = "http://site.com/pics/5";
}
else if(event.keyCode === 39) {
window.location = "http://site.com/pics/7";
}
});
Any key events that originate from a textarea element with an id of myTextArea will then be ignored.

You can check if the textarea is in focus by doing something like:
if (document.activeElement == myTextArea) {
// Don't change the page
}

$("#mytextarea").is(":focus") This will let you know if the element is focused.
Also $(document.activeElement) will get the currently focused element.
You can check to see if your text area is focused, and disable the script that navigates when using left and right arrow keys.
A little bit of code showing what you've tried might bring in more specific responses.
Hope this helps.

How to disable Enter/Return Key After a function is executed because of it?

I have this function where #text_comment is the ID of a textarea:
$('#text_comment').live('keypress',function (e) {
if(e.keyCode == 13) {
textbox = $(this);
text_value = $(textbox).val();
if(text_value.length > 0) {
$(this).prev().append('<div id="user_commenst">'+text_value+'</div>');
$(textbox).val("");
}
}
});
What is happening is the text is appending when the enter/return key is hit (keyCode 13), but it is also moving the text a line down, as the enter/return key is supposed to.
This is occurring even though I set the value of the textbox to "".

How about event.preventDefault()

Try and stop your event propagation (See http://snipplr.com/view/19684/stop-event-propagations/) when entering the if(e.keyCode == 13) case.

try this one event.stopImmediatePropagation()
$('#text_comment').live('keypress',function (e) {
if(e.keyCode == 13) {
e.stopImmediatePropagation()
///rest of your code
}
});

I've tested this out, this works. The enter does not create a new line.
$('#text_comment').live('keypress',function (e) {
if(e.keyCode == 13) {
textbox = $(this);
text_value = $(textbox).val();
if(text_value.length > 0) {
$(this).prev().append('<div id="user_commenst">'+text_value+'</div>');
$(textbox).val("");
}
return false;
}
});
Although I am wondering, if you don't want to ever have a new line, why are you using a textarea, why not use a input type='text' instead ?

Answer here http://jsfiddle.net/Z9KMb/

jquery code is not workign after postback

I wrote the following jquery code to allow only numbers in a textbox.
$("[id$='txtPriority']").keydown(function (event) {
if (event.keyCode == 48) {
var value = $("[id$='txtPriority']").val();
if (value == "") {
event.preventDefault();
return;
}
}
else if (event.keyCode == 86 || event.keyCode == 118) {
event.preventDefault();
return;
}
else {
$("[id$='txtPriority']").numeric();
}
});
});
This works fine ,when the page is loaded for first time.But after post back the code is not working.What might be the reason.

I you are changing something with ajax then the event will not work.
Try using the live function ( http://api.jquery.com/live/ )
$("[id$='txtPriority']").live('keydown', function (event) {

I had this problem once and it was because I was replacing the html for the form in the postback. You need to reset your event handlers after replacing the controls or use the .live() handler which will work even for elements you add later:
$("[id$='txtPriority']").live('keydown', function (event ) {