Develop Reference

Simulate keyboard with Jquery on button

I'm trying to experiment some things with js-dos (a plugin of dosbox on browser) and I need a button to simulate a keyboard key (ENTER for example)
I've tried creating an onclick event and inside the function,a Jquery "keypress" event,but nothing seems to work.
I've tried this:
$("button").on("click",function(){
var val=13;
$("canvas").trigger({
type:keypress, keyCode:val,which:val,charCode:val
});
})
and this
var e = jQuery.Event('keydown');
e.which = 13;
e.keyCode = 13;
$("canvas").trigger(e);
What am I doing wrong here?

Add listener to the triggered event.
let e = jQuery.Event('keydown');
$('div').on('keydown', function() {
console.log('calling');
});
$('button').on('click', function() {
$('div').trigger(e);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>Lorem Ipsum</div>
<button>Click Me</button>

var input = document.getElementById("myInput");
// Execute a function when the user releases a key on the keyboard
input.addEventListener("keyup", function(event) {
// Number 13 is the "Enter" key on the keyboard
if (event.keyCode === 13) {
// Cancel the default action, if needed
event.preventDefault();
// Trigger the button element with a click
document.getElementById("myBtn").click();
}
});

Restore default value of arrows key

I'm using a script (impress.js) that bins some particular action to keyup and keydown events for left, right, up and down arrows.
In some particular moments (for example while typing in a textarea) I want back the default behaviour for the arrows.
I tried without success with
$("a#show-ta").click( function() {
document.addEventListener("keydown", function ( event ) {
if (event.keyCode >= 37 && event.keyCode <= 40) {
return;
}
});
document.addEventListener("keyup", function ( event ) {
if (event.keyCode >= 37 && event.keyCode <= 40) {
return;
}
});
});
where a#show-ta is the button that shows my textarea.

You want to prevent the keypress from bubbling up to the document where (I assume) Impress binds its handlers:
$("textarea").on('keyup keydown keypress', function(e) {
e.stopPropagation();
});

If you need the event in a specific zone, such as a texarea, you should stop the propagation of the event like this :
$('textarea').keydown( function(ev) {
ev.stopPropagation();
});
If the events are necessary for the whole page but you want to exclude while you are in a textarea, for example, you could raise a flag which you would validate in the event.
var keydownActivated = true;
$('textarea').keydown( function(ev) {
if (keydownActivated) {
ev.preventDefault();
// dostuff
}
});

This will more or less get you where you are going. Create a flag that tracks whether or not the textarea has focus, and check that flag in your current key press event handlers. I can't see all of your code, so this is just a simple example:
var textareaHasFocus = false;
var textarea = document.querySelector('#yourTextarea');
textarea.addEventListener('focus', function(event) {
textareaHasFocus = true;
}, false);
textarea.addEventListener('blur', function(event) {
textareaHasFocus = false;
}, false);
document.addEventListener("keydown", function ( event ) {
if (textareaHasFocus) return true;
// your current keyboard handler
});
document.addEventListener("keyup", function ( event ) {
if (textareaHasFocus) return true;
// your current keyboard handler
});

Why does keyup doesn't return false while keydown do? [duplicate]

I have the following code:
$(document).on('keyup', 'p[contenteditable="true"]', function(e) {
if(e.which == 13) {
e.preventDefault();
$(this).after('<p contenteditable = "true"></p>');
$(this).next('p').focus();
} else if((e.which == 8 || e.which == 46) && $(this).text() == "") {
e.preventDefault();
alert("Should remove element.");
$(this).remove();
$(this).previous('p').focus();
};
});
I would like to prevent the default action when a key is pressed. preventDefault works for keypress but not keyup. Is there a way to prevent the defualt for $(document).on('keyup')?

No. keyup fires after the default action.
keydown and keypress are where you can prevent the default.
If those aren't stopped, then the default happens and keyup is fired.

We can prevent the action by using following code snippet.
e.stopPropagation();
e.preventDefault();
e.returnValue = false;
e.cancelBubble = true;
return false;
keyup fires after keydown/keypress. we can prevent default action in anyone of those events.
Thanks,
Siva

How to fire the actual "Enter" keypress event of the browser?

I know it is possible to use JQuery.Event to simulate "Enter" keypress. Something like this does that -
var event = jQuery.Event( "keydown" );
event.keyCode = 13
$("input").trigger( event );
However, this does not fire the browser default behavior when the actual "Enter" key is pressed. For example, going to next line if the cursor is in textarea or submitting the form when the cursor is in input tag.
I want to know if it is possible to trigger or simulate the actual "Enter" keypress event/behavior.

Try this : Js fiddle
var e = jQuery.Event("keypress");
e.which = 13
$("#test").keypress(function(){
alert('keypress triggered')
}).trigger(e)

Do you want some thing similar this one?
$(function(){
$(document).keypress(function(event) {
if(event.which == 13) {
console.log("Dude! You hit Enter Key!!");
}
});
});

you can use this:
$("body").delegate("input", "keypress",function(e){
if(e.which == 13){
}
}
it's work for all input .

Submit form on press of specific key

Is there any way how to submit form when you press some predefined key on your keyboard (for example ; key)? I was thinking about something with onkeypress, but dont know how to set it just for one specific key.

Yes, and you were right with thinking onkeypress, just pass in the event, and check which key is pressed with event.which:
function keyPressed(event) {
if (event.which == 186) //keycode for semi-colon
console.log("Semi-colon pressed!");
}
}
Now just attach this function to a keypress handler.
Edit: Got the keycodes from here: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

You'll want to get the keycode and submit the form if it's the right keycode.
To get the keycode from an event, do:
$(document).on("keypress", function(event) {
var keyCode = event.keyCode;
var keyWhich = event.which;
if(keyCode = 'yourkey' || keyWhich = 'yourkey') {
$(form).submit();
}
});
For a full list of keycodes to replace 'yourkey' with, I'd recommend something like this cheat sheet. Just type your key in the input and use whatever value it provides as your function's logic

You can do this in jQuery:
$(document).ready( function() {
$(document).keydown(function(e){
if (e.keyCode == 186) { // ; key
$('#theform').submit();
}
});
});
See fiddle.