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?
addEventListener("keydown", function (e) { if (e. code === "Enter") { //checks whether the pressed key is "Enter" validate(e); } }); function validate(e) { var text = e. target. value; //validation of the input... }
You can use: var e = jQuery. Event("keypress"); e. which = 13; //enter keycode e.
The keypress event is fired when a key that produces a character value is pressed down. Examples of keys that produce a character value are alphabetic, numeric, and punctuation keys. Examples of keys that don't produce a character value are modifier keys such as Alt , Shift , Ctrl , or Meta .
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>
If I get your question right, this is what you are looking for
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).keydown(function(event){
if(event.keyCode == 13){
alert("keypressed");
}
});
function clickevent()
{
var e = $.Event("keydown");
e.which = 13;
e.keyCode = 13;
$(document).trigger(e);
}
</script>
</head>
<body id="thebody">
<input type="button" onclick="clickevent()" value="click me first">
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With