I'm writing some unit test in my web apps and I want to automatically trigger an Enter key pressed event from my page after for example a download to text file button was clicked. How can i do this in jQuery or Javascript?
I'm writing some unit test in my web apps and I want to automatically trigger an Enter key pressed event from my page after for example a download to text file button was clicked. How can i do this in jQuery or Javascript?
Create a variable that tells us if the user has clicked your button.
var clicked = false;
Add an event listener to your button, so that when the user clicks on it, the clicked
variable will become true
.
myButton.addEventListener('click', function(){
clicked = true;
});
Add a keypress
event listener:
document.addEventListener('keypress', function(e) {
// `e` is the event
});
Inside that event listener, check if the user clicked previously
if(clicked) {
// ...
}
If (s)he did, check the pressed key. Enter's key code is 13.
var keynum = e.keyCode||e.which;
if(keynum == 13) {
// ...
}
If the pressed key was enter, use
clicked = false;
Otherwise, once the user clicked your button and pressed enter, it wouldn't be necessary to click the button again.
After that run your code. For example, this will call function f
after 2 seconds.
setTimeout(f, 2000);
Live demo
var clicked = false;
document.querySelector('#btn').addEventListener('click', function(){
clicked = true;
snippet.log(You clicked the button. `clicked` is now `true`);
});
document.addEventListener('keypress', function(e) {
if(clicked) {
var keynum = e.keyCode || e.which;
if(keynum == 13) {
clicked = false;
snippet.log(`clicked` is now `false`. Waiting 2 seconds...);
setTimeout(f, 2000);
}
}
});
function f() {
snippet.log(Function `f` executed successfully!);
}
#btn {
border: 3px solid red;
cursor: pointer;
}
<div id=btn>Click me, and then press enter.</div>
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --><script src=http://tjcrowder.github.io/simple-snippets-console/snippet.js></script>