如何通过 document.getElementById("BtnID").click() 调用 onclick / button 按下效果答案

【问题标题】：How to invoke the onclick / button pressed effect through document.getElementById("BtnID").click()如何通过 document.getElementById("BtnID").click() 调用 onclick / button 按下效果
【发布时间】：2016-09-11 14:09:28
【问题描述】：

我正在尝试创建一个屏幕键盘。

我已经添加了按钮并将这些按钮与键盘键绑定。因此，用户可以单击页面上的按钮来键入或使用实际的物理键盘。

JavaScript :

 document.onkeydown = function (e) {
        e = e || window.event;
        switch (e.which || e.keyCode) {
            case 65: document.getElementById("A").click();  break;
            case 83: document.getElementById("S").click();  break;
            case 68: document.getElementById("D").click();  break;
        }
 }

HTML :

<button class="button" type="button" onclick="Print('A')" id="A">A</button>
<button class="button" type="button" onclick="Print('S')" id="S">S</button>
<button class="button" type="button" onclick="Print('D')" id="D">D</button>

一切正常，问题是当我使用物理键盘键入时，不显示按键效果。 document.getElementById("something").click() 似乎没有播放按键效果。屏幕上的按钮保持静止。如果我使用鼠标按下按钮，则按钮按下效果完美。

请看下面的图片：

When the button 'S' is clicked using mouse

When i press the key 'S' on my physical keyboard

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

我会使用 css 样式来解决。

Print = function(button){
	button.className = 'button active';
	setTimeout( function(){ button.className = 'button'; }, 500 );
	
	console.log(button.innerHTML);
}

document.onkeydown = function (e) {
  e = e || window.event;
  var key = (e.which || e.keyCode),
  pressed = {65:'A', 83:'S', 68:'D'};
				
  if( typeof pressed[ key ] === 'undefined' )
    return;
				
  document.getElementById(pressed[ key ]).click();
 }

.button.active {
	background:#333;
	color:#FFF;
}

<button class="button" type="button" onclick="Print(this)" id="A">A</button>
<button class="button" type="button" onclick="Print(this)" id="S">S</button>
<button class="button" type="button" onclick="Print(this)" id="D">D</button>

【讨论】：

感谢您的回复。这工作得很好。但现在我稍微改变了我的css。现在我有.button {...}、`.button:after {..}` 和.button:active:after {...}，我如何调整我的代码以在按下键盘键时发挥效果？请看这个link
避免使用伪类 ':active'.. 始终使用真正的 css 类 ( f.E: '.button.active:after ) 并在您想要的每个事件上更改按钮类。（按键、点击等）你知道我的意思吗？最美好的祝愿

【解决方案2】：

您可以使用 jQuery API 中的.keypress()： https://api.jquery.com/keypress/

【讨论】：