Jquery key press event not triggered on enter - javascript

$("#username,#password").keypress(function(e)
{
//alert('');
if(e.keyCode == 13)
{
signIn();
}
});
The keypress event not calling if the enter button is pressed.

Try using keyUp event.
Live Demo
$("#username,#password").keyup(function(e){
//alert('');
if(e.keyCode == 13)
{
signIn();
}
});
This is also working with keypress
Live Demo
$("#txt1").keypress(function(e) {
if (e.keyCode == 13) {
//signIn();
alert("keypress");
}
});​

Key down is more appropriate:
$("#username,#password").keydown(function(e){
if(e.keyCode == 13)
{
signIn();
}
});

Use e.which instead of e.keyCode because this is what jQuery guarantees to be on event
Try e.preventDefault(), because without it (if they are in a form) the form submits
Maybe the best would be listening on form's submit event

Are you sure it's not the signIn (); function that's faulty? Because this seems to work just fine; http://jsfiddle.net/vDkBs/1/

Use keypress and which statement:
$("#username,#password").keypress(function(e) {
if (e.which == 13) {
//call here your function
}
});

Related

How to detect esc key press while showing jquery notification

I want to detect the key event of escape while displaying the jquery notification. But as this is blocking the input I'm unable to detecting key board event while noty is showing.
$(document).keyup(function(e) {
if (e.keyCode == 27) {
//your codes
}
});
Use This Code It Works Everywhere:
// define a handler
function doc_keyUp(e) {
if (e.keyCode == 27) {//27 is Esc KeyCode
alert('Escape Key Has Been Pressed!');
}
}
// register the handler
document.addEventListener('keyup', doc_keyUp, false);
You can use onkeyup to pass event handler like-
<input type="text" onkeyup="YourKeyupHandler(event)">
Now you can implement function like-
function YourKeyupHandler(event) {
event = event || window.event || event.srcElement;
if (event.keyCode == 27) {
//here you can do whatever you want
}
}

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.

How do I trap enter from form except textarea

In a dynamic form, I have the following code to trap 'enter' key.
$(document).bind('keypress', function (e) {
if (e.keyCode == 13) {
e.preventDefault();
}
});
Occasionally, there is an element like HTMLTextAreaElement which accept 'enter' key.
how do I unbind preventDefault only for HTMLTextAreaElement.
TIA.
Try this:
if (e.which == 13 && e.target.localName !== 'textarea') {
$("html *:not(textarea)").bind('keypress', function (e) {
if (e.keyCode == 13) {
e.preventDefault();
}
});
Demo: http://jsfiddle.net/DerekL/4JWLb/

Keypress to change class in jQuery

I have a problem I can't seem to sort out.
I have a form with a custom styled button (input type=button). When typing in the text field, I want people to be able to press the TAB key and go to the button. However, it won't use a tab-index so my solution was to highlight the label and change the CSS to give the button a new border color. However, the border color will not change on keypress in any browser other than Firefox.
Here is what I have:
$(function() {
$("#email").bind("keypress", function(e) {
if (e.keyCode == 13) {
send();
return false;
};
if (e.keyCode == 9) {
$("#submit_btn").removeClass('submit1').addClass('submit1after');
};
});
};
The first enter keypress is to serialize and email the form and all.
I can't seem to get it to work for the life of me. What am I doing wrong? Is there a better solution to what I'm trying to accomplish?
Thanks for taking the time,
Armik
Use keydown instead, for me that works (see demo: http://jsfiddle.net/npGtX/2/)
$(function () {
$("#email").bind("keydown", function (e) {
if (e.keyCode == 13) {
send();
return false;
};
if (e.keyCode == 9) {
$("#submit_btn").removeClass('submit1').addClass('submit1after');
};
});
};
Also I found this: Suppressing keyPress for non-character keys?
keypress is not necessarily triggered when the keypress is not a
character. So the browser may not trigger an event on backspace, F1,
the down key, etc.
You can use the keyup event and event object's which property, jQuery normalizes the which property and it's cross-browser:
$(function() {
$("#email").bind("keyup", function(e) {
if (e.which == 13) {
send();
return false;
};
if (e.which == 9) {
$("#submit_btn").toggleClass('submit1 submit1after');
};
});
};
$(function() {
$("#email").keypress(function(e) {
if (e.keyCode == 13 || e.which== 13) {
send();
return false;
};
if (e.keyCode == 9 || e.which== 9) {
$("#submit_btn").removeClass('submit1').addClass('submit1after');
};
});
};

Fire event on hit enter and change

I have one text box when user enter in text box and hit enter it should alert the value, and also if user change the value it should also alert. So there will be two events keypress and change. And I want call this with minimum code. no duplicate codes.
$('#txt').keydown(function (e){
if(e.keyCode == 13){
alert('you pressed enter ^_^');
}
})​
Online Demo
You can list multiple events as the first parameter (though you still have to handle each event):
$('#txt').bind('keypress change', function (e){
if(e.type === 'change' || e.keyCode == 13) {
alert('you pressed enter ^_^');
}
})​;​
I'm using bind on purpose, because the OTs fiddle uses jQ 1.5.2
This is how I would approach this problem.
http://jsfiddle.net/tThq5/3/
Notes: I'm using $.live() (v.1.3) rather than $.on() (v1.7) and also returning false so I don't get more than 1 event fired.
$('#txt').live('keypress change', function(e) {
if (e.type === 'keypress' && e.keyCode == 13) {
alert('you pressed enter');
return false;
} else if (e.type === 'change') {
alert('you made a change');
return false;
}
});​
Something like this?
$('#txt')
.keydown(function (e) {
if(e.keyCode == 13){
alert('you pressed enter ^_^');
}
})
.change(function(e) {
alert('you changed the text ^_-');
});
Try the live approach:
$("#txt").live({
change: function(e) {
alert('you changed the value');
},
keydown: function(e) {
if (e.keyCode == 13) {
alert('you pressed enter ^_^');
}
}
});
http://jsfiddle.net/tThq5/1/

Categories