We Keep Coding

Understanding how many times the jquery events are called and right handling of keyup event

I am trying to develop my webpage where I have a simple input field where I can type something. I want that when I type something and press "enter", a function gets called. The code I am using is:
$(document).ready(function(){
$("#searchBar").click(function(){
$("#searchBar").keyup(function (e) {
if (e.keyCode == 13) {
$(this).trigger("enterKey");
}
});
$("#searchBar").bind("enterKey", function (e) {
searchFunction();
});
})
})
Something is not working well. I have 2 questions:
First of all by debugging on the browser I realize that the event "keyup" is called whenever I type any kind of character, but not when I press "enter" and I don't know why.
By always debugging and using a breakpoint on the keyup handler, it happens that when I press a key, in order to get out from the breakpoint I have to resume the script execution once.. then if I type another character and I go again at the breakpoint, I have to resume the script exectuion twice instead of once to continue debugging.. and so on incresing.. why do I have this kind of behavior?
Thanks in advance!

Two problems:
#searchBar only listens to keyUp and Enter if you have clicked on it at least once
#searchBar adds a new keyUp and Enter listener for each time it receives a click event
I'd just bind the events once like so:
$(document).ready(function(){
$("#searchBar").keyup(function (e) {
if (e.keyCode == 13) {
$(this).trigger("enterKey");
}
});
$("#searchBar").bind("enterKey", function (e) {
searchFunction();
});
});
I can't come up with a valid reason to stop listening to the events, but if that's what you want, then I'd unbind just before or after the call to your searchFunction();
$(document).ready(function(){
$("#searchBar").click(function(e){
$(this).keyup(function (e) {
if (e.keyCode == 13) {
$(this).trigger("enterKey");
}
});
$(this).bind("enterKey", function (e) {
searchFunction();
$(this).unbind("enterKey");
$(this).unbind("keyup");
});
});
// but you'd also need to unbind the events if the user clicks somewhere else in the document, otherwise, these events would still get attached every time the user clicks #searchBar
});
But it's unnecessary, as the events are only fired when #searchBar has focus. All these events also detach if you delete #searchBar
Also, why fire "enterKey" when you already are listening for keystrokes?
$(document).ready(function(){
$("#searchBar").keyup(function (event) {
var keycode = event.keyCode || event.which; //this for cross-browser compatibility
if (keycode == 13) {
searchFunction();
}
});
});

I have to resume the script exectuion twice instead of once to
continue debugging.. and so on incresing.. why do I have this kind of
behavior?
You are attaching a new keyup and enterKey event at each click on element.
Remove click event or use .one() to attach click event
$(document).ready(function() {
var search = $("#searchBar").keyup(function (e) {
if (e.keyCode == 13) {
search.trigger("enterKey");
}
})
.on("enterKey", function (e) {
searchFunction();
});
})
or, if one click is intended to begin process
$(document).ready(function(){
var search = $("#searchBar").one("click", function() {
search.keyup(function (e) {
if (e.keyCode == 13) {
search.trigger("enterKey");
}
})
.on("enterKey", function (e) {
searchFunction();
});
})
})

bind click and keyup of different target to do same function

I have a submit button, I use $("#submit") to perform "myAction function", but in the same time I also want if the user pressed enter, it perform "myAction function"..
I can't do like this
$("#submit").on('click keyup', function(){
//myAction function
});
because I have to attach the keyup event to my input field instead of #submit..

Give a name to your function and bind both event on the selector. Then add a special condition:
function send(e){
if(e.type == 'click' || (e.type == 'keyup' && e.wich == 13))
}
$('[type=text]').on('keyup', send);
$('[type=submit]').on('click', send);

Write your my action as a separate function and use it as below
function myAction() {
console.log('act');
//do your stuff here
}
$("#submit").on('click', myAction);
$("input.enter").on('keypress', function (e) {
//enter key code is 13
if (e.which == 13) {
myAction()
}
});
Demo: Fiddle

How to prevent 'pressing enter' in an input to trigger an event ? Java script

I have an input and an appended button. The click on button calls some function. But I don't want this function to be called when user 'presses enter key'. On the other hand, I want on keyup in this input to call some other function. SO I put
$(document).on('keyup', '#id', function(e){
call();//calling some function
if (e.which == 13 || event.keyCode == 13) {
e.preventDefault();//I also tried to return false
}
});
But it doesn't seem to work, someone has an idea ?

$(document).on('keyup', '#id', function(e){
if (event.keyCode != 13) {
e.preventDefault();
call();//calling some function
}
return false;
});

Try this:
$(document).on('keyup', '#id', function(e){
if (e.which == 13 || e.keyCode == 13) {
e.preventDefault();//I also tried to return false
}else{
call();//calling some function
}
});

Don't use keyup, since the form is send on keydown.

Have you tried switch .call() function to a simple alert(), just for tests purpose. #Oyeme and #Jai code seems to work properly.

Avoid multiple event listeners from .focus

I currently have a textbox that I am invoking a keyboard stroke on focus:
$myTextBox.on('focus', function(e){
$(document).keydown(function(e){
if(e.which==13)
e.preventDefault()
});
$(document).keyup(function(e){
if(e.which ==13)
alert("hey");
});
});
If I click on this multiple times pressing 'enter' once will cause many alerts, how can I avoid this so that only it is only invoked once.

You're adding the event listener every time the field gets focus.
Just add the keydown, keyup listener on the document ready function...
$(function() {
$("#myTextBox").keydown(function(e){
if(e.which==13)
e.preventDefault()
});
$("#myTextBox").keyup(function(e){
if(e.which ==13)
alert("hey");
});
});​
http://jsfiddle.net/ShHkP/

Like others have said, you don't have to keep adding the event on focus. As well, you should just attach the event to the textbox itself because that is in fact what you're trying to do when you add the event on focus.
$myTextBox.on({
'keydown': keyDown,
'keyup': keyUp
});​
So that your application doesn't go into an enter-alert-ok loop, you have to turn off the keyup listener before the alert() call, and then turn it back on after hitting ok.
Here's a fiddle.

I see what you're trying to do (or not?). You could just attach the event to the form and exclude the textarea instead of adding it to the document everytime the input gets focused.
$('form').on('keydown', function( e ) {
// Prevent submit when pressing enter but exclude textareas
if ( e.which == 13 && e.target.nodeName != 'TEXTAREA' ) {
e.preventDefault();
}
}

var alreadyPressed = false;
$("textarea").keypress(function (e) {
if (e.which == 13) {
e.preventDefault();
alreadyPressed = true
}
});
$("textarea").keyup(function (e) {
if (e.which == 13 && !alreadyPressed) {
alert("hey");
alreadyPressed = false;
}
});
http://jsfiddle.net/DerekL/Dr6t2/

jQuery to trigger CSS3 button

I have this CSS3 enter button
here:
If you click it, it seems like it's pressed. I want to achieve the same effect (probably using jQuery), by pressing the enter key physically on my keyboard.
I did something like this: (sorry if it's completely wrong, I don't do jQuery at all)
<script type="text/javascript">
$(document).ready(function(){
$("enter").keypress(function(event){
if(event.keyCode == 13){
$(this).toggleClass(".button-clicked");
}
});
});
</script>
The CSS selector for the unpressed button is:
.button and .button.orange {}
The CSS selector for the pressed button is:
.button:active, .button-clicked {}
Thanks for your help!

I haven't tested this, but I think you should be able to do something like
I have just tested this (and linked to a demo, below the jQuery), and it works pretty well:
$('body').keydown(
function(e){
if (e.which == 13) { // enter
$('buttonSelector').addClass('button-clicked');
}
}).keyup(
function(e){
if (e.which == 13) { // enter
$('buttonSelector').removeClass('button-clicked');
}
});
JS Fiddle demo.
With this the keydown causes the button to appear pressed so long as the enter key is pressed, and, on release, triggers the keyup() handler, changing the style of the button so as to appear un-clicked.
Refined the above, somewhat, using on(), though having to use an if/else if statement to check the function type:
$('body').on('keydown keyup', function(e) {
if (e.type == 'keydown') {
if (e.which == 13) { // enter
$('#button').addClass('button-clicked');
}
}
else if (e.type == 'keyup') {
if (e.which == 13) { // enter
$('#button').removeClass('button-clicked');
}
}
});
JS Fiddle demo.
References:
keydown().
keyup().
addClass().
removeClass().
on().

You are trying to apply the keypress to an <enter></enter> element (which doesn't exist), try doing this:
<script type="text/javascript">
$(document).ready(function(){
$("body").keypress(function(event){
if(event.keyCode == 13){
$(".button").toggleClass("button-clicked");
}
});
});
</script>

Close but how about this:
//bind to the `keydown` event when the `document` is focused
$(document).on('keydown', function (event) {
//if enter is pressed
if (event.keyCode == 13) {
//add the `.button-clicked` class to any element with the `.button` class
$('.button').addClass('button-clicked');
}
}).on('keyup', function (event) {
if (event.keyCode == 13) {
$('.button').removeClass('button-clicked');
}
});
Here is a jsfiddle: http://jsfiddle.net/jasper/T5yEu/2/
Notice that I added !important to the .button-clicked class on several of the rules to make sure they are added to the element.