使 javaScript（不是 JQuery！）在按键时“激活”CSS 按钮：活动样式
[英]Make javaScript (not JQuery!) "activate" on keypress a CSS button:active style
问题描述
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).如果我点击上面的按钮一切正常，但是当我按下键“S”（键码：115）时，函数“start()”被调用，但活动按钮的 CSS 没有启动（即按钮的动画不会发生）。
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?问题：我怎样才能让 button:active 动画在我按下“S”时开始，让它看起来就像我在按下键盘上的“S”键时点击 HTML 按钮一样？
Please don't use JQuery in the answer, just plain JavaScript, since I'm not using JQuery libraries.请不要在答案中使用 JQuery，只使用纯 JavaScript，因为我没有使用 JQuery 库。
Thank you!谢谢！
2 个解决方案
解决方案1
3 2016-10-23 22:41:26
You need to assign an EventListener to the keypress.您需要为按键分配一个 EventListener。 Also, you do not need to perform a click on the button, you could call the start() -function directly, I think?另外，您不需要单击按钮，您可以直接调用start()函数，我想？
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. JavaScript click()调用就像按住按钮很短的时间一样，因此您不会看到任何动画。
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.例如，在clicked类时设置它的宽度（或任何其他属性）并使用 JS 切换类。
解决方案2
1 已采纳 2016-10-23 23:44:13
Update: Good Point from @flen to useElement.classList.toggle();更新： @flen 使用Element.classList.toggle();好点Element.classList.toggle(); witch supported in IE >= 10 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另一种完成任务的方法适用于使用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();" />
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.