We Keep Coding

jQuery trigger keyup on input gets old value

I try to manually trigger key-up event in qunit test but it fails since manually trigger key-up event will not change the input value.
http://jsfiddle.net/Re9bj/4/
$('input').on('keyup', function (event) {
$('div').html($('input').val());
});
var e = $.Event('keyup', {
keycode: 68
});
$('input').trigger(e); //this trigger will not change the input value
This trigger will work but the problem is that input value never change.

You can't add a character with a simple trigger. Trigger will only fire events, but not the default behavior. You need to simulate it.
To do that, you can use this code :
if(event.isTrigger && event.keycode) this.value += String.fromCharCode(event.keycode);
It will check if the event is triggered and then print the value.
Final code :
$('input').on('keyup', function (event) {
if(event.isTrigger && event.keycode) this.value += String.fromCharCode(event.keycode);
$('div').html($('input').val());
});
var e = $.Event('keyup', {
keycode: 68
});
$('input').trigger(e);
Fiddle : http://jsfiddle.net/Re9bj/9/

How to trigger the enter keypress

I need to know how to trigger an enter key on an input. That is, in response to some other event (not a keypress), I need to trigger a keypress of value 13.
(Clarification, I do not want to trigger some event when the enter key is pressed. If I didn't know how to do that, I could find that that's been asked and answered several times on SO. I want the reverse. I am trying to develop a workaround that requires I emulate an 'enter' keypress.)

You can do this -
var e = $.Event( "keypress", { which: 13 } );
$('#yourInput').trigger(e);
http://api.jquery.com/category/events/event-object/
http://api.jquery.com/trigger/

var e = $.Event( "keyup", { keyCode: 13 } );
$('#yourInput').trigger(e);
Worked for me, instead of 'which', I used 'keyCode'

Simulate enter keypress
var e = jQuery.Event("keypress");
e.which = 13
e.keyCode = 13
$('#email').focus();
$('#email').trigger(e);
capture enter keypress
$('#email').keypress(function (e) {
if (e.which == '13') {
alert('code');
}});

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/

What Javascript event is fired when "return" is clicked on an iPad when an input is selected?

Which Javascript event is fired when someone presses the "return" key on an iPad in Safari while an input is selected.
I'm using an input element, but not surrounding it in <form> tags. I submit the $('#input').value() when $('#button').click() occurs. However, I'd like to also like to be able to submit when someone presses "return" on the iPad keyboard.
I was overzealous, here is the answer:
jQuery Event Keypress: Which key was pressed?

You can detect the enter key event in safari on ipad with following way :
<body onkeyup="yourFunction(event)">
then in javaScript
function yourFunction(event) {
var e;
if(event) {
e = event;
} else {
e = window.event;
}
if(e.which){
var keycode = e.which;
} else {
var keycode = e.keyCode;
}
if(keycode == 13) {
alert("do your stuff");
}
};

What about using a <form> tag and binding your handler to the submit tag.
$("#myForm").submit(function (event) {
doStuff();
});
It's cleaner and simpler.

Bind enter key to specific button on page

<input type="button" id="save_post" class="button" value="Post" style="cursor:pointer;"/>
How can I bind the enter key on the persons keyboard to this specific button on the page? It's not in a form, and nor do I want it to be.
Thanks!

This will click the button regardless of where the "Enter" happens on the page:
$(document).keypress(function(e){
if (e.which == 13){
$("#save_post").click();
}
});

If you want to use pure javascript :
document.onkeydown = function (e) {
e = e || window.event;
switch (e.which || e.keyCode) {
case 13 : //Your Code Here (13 is ascii code for 'ENTER')
break;
}
}

using jQuery :
$('body').on('keypress', 'input', function(args) {
if (args.keyCode == 13) {
$("#save_post").click();
return false;
}
});
Or to bind specific inputs to different buttons you can use selectors
$('body').on('keypress', '#MyInputId', function(args) {
if (args.keyCode == 13) {
$('#MyButtonId').click();
return false;
}
});

Vanilla JS version with listener:
window.addEventListener('keyup', function(event) {
if (event.keyCode === 13) {
alert('enter was pressed!');
}
});
Also don't forget to remove event listener, if this code is shared between the pages.

Maybe not quite what you're looking for but there is a HTML property that lets you assign a specific button called an access key to focus or trigger an element. It's like this:
<a href='https://www.google.com' accesskey='h'>
This can be done with most elements.
Here's the catch: it doesn't always work. for IE and chrome, you need to be holding alt as well. On firefox, you need to be holding alt and shift (and control if on mac). For safari, you need to be holding control and alt. On opera 15+ you need alt, before 12.1 you need shift and esc.
Source: W3Schools