Make javaScript (not JQuery!) "activate" on keypress a CSS button:active style
Question
Newbie here.
I have a similar code:
...
<style>
.button:active {
box-shadow: 0 5px #666;
transform: translateY(4px);
}
</style>
<script>
document.onkeypress = function(e) {
// 83 is the number code for the letter "S" and 115 the for the letter "s"
if (e.which === 83 || e.which === 115) {
document.getElementById('start').click();
}
...
</script>
<body>
<input type="button" id="start" class="button" value="Start (S)" onclick="start();">
</body>
If I click on the above button everything works fine, but when I press the key "S" (keycode: 115) the function "start()" is called, but the CSS for active button doesn't start (that is, the animation for the button doesn't happen).
Question: How can I make the button:active animation start when I press "S", to make it look just as if I was clicking on the HTML button when I press the "S" key on my keyboard?
Please don't use JQuery in the answer, just plain JavaScript, since I'm not using JQuery libraries.
Thank you!
2 answers
solution1
3 2016-10-23 22:41:26
You need to assign an EventListener to the keypress. Also, you do not need to perform a click on the button, you could call the start() -function directly, I think?
document.addEventListener('keydown', function(e) {
if(e.keyCode == 115) start();
});
This could work for you!
EDIT: As you see in the below example, the animation is only happening, while holding down the button. The JavaScript click() -call is only like a very short period of holding down the button, so you wont see any animation.
var el = document.getElementById("btn");
#btn { width: 20px; transition: all 2s ease; } #btn:active { width: 80px; }
<input type="button" id="btn">
To get the desired effect, you could animate the element on a class. For example set it's width (or any other attribute) with the class clicked and toggle the class with JS.
solution2
1 ACCPTED 2016-10-23 23:44:13
Update: Good Point from @flen to useElement.classList.toggle(); witch supported in IE >= 10
document.onkeypress = function(e) { if ((e.which || e.keyCode) == 115) { //this is the number code for the letter "S" document.getElementById('start').click(); document.getElementById('start').classList.add("button-active"); } }; document.onkeyup = function(e) { document.getElementById('start').classList.toggle("button-active"); } function start() { console.log("start") }
<style> /*set button-active */ .button:active, .button-active { box-shadow: 0 5px #666; transform: translateY(4px); } </style> <input type="button" id="start" class="button" value="Start (S)" onclick="start();" />
another way to do the task works for all browsers using Element.className
document.onkeypress = function(e) { if ((e.which || e.keyCode) == 115) { //this is the number code for the letter "S" document.getElementById('start').click(); if (document.getElementById('start').className.indexOf("button-active") == -1) document.getElementById('start').className += ' button-active'; } }; document.onkeyup = function(e) { document.getElementById('start').className = document.getElementById('start').className.replace(/button\\-active/g, ""); } function start() { console.log("start") }
<style> /*set button-active */ .button:active, .button-active { box-shadow: 0 5px #666; transform: translateY(4px); } </style> <input type="button" id="start" class="button" value="Start (S)" onclick="start();" />
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.