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

Question

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

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

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

Answer 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>