javascript - : How to catch the Spacebar and the Enter key, 是否可访问鼠标左键？

Question

给定功能的一部分，单击鼠标左键时可以完美地工作(切换播放/暂停功能完美)。但是，当使用 Tab 键仅使用键盘浏览方法时，会使用 Tab 键选择该按钮，但按 enter 或 空格键 不会播放或暂停音频，因此无法通过键盘访问切换。由于播放按钮会为视障人士/盲人启动屏幕阅读器，而盲人不使用鼠标，因此必须使用仅使用键盘的方法按下此键:空格键或 Enter 键。如何在当前工作的鼠标左键旁边实现这两个击键，以便所有三个触发器而不是一个触发器来播放和暂停屏幕阅读器？谢谢，代表 future 没有鼠标的盲人用户。

// starts the screen reader
play.addEventListener('click', function() {
    myAudio.play();
});

// pauses the screen reader
pause.addEventListener('click', function() {
    myAudio.pause();
});

jsfiddle演示适用于鼠标单击，但不适用于 Enter/空格键按键

Answer 1

注意:为了准确性，该答案已被编辑。

阅读OP的评论后，这就是他们问题的解决方案。

您的新 HTML:

<audio src="http://labs.qnimate.com/files/mp3.mp3"></audio>
<play tabindex="1">PLAY</play>
<pause tabindex="1">PAUSE</pause>

你的新CSS:

play, pause {
  display: none;
  text-align:center;
  vertical-align:middle;
  width: 200px;
  height: 50px;
  font-size: 30px;
  background: yellow;
  cursor: pointer;
}

play:focus, pause:focus {   /* TABBED BROWSING */
  outline: 2px solid #00F;
}

你的新 JavaScript:

var myAudio = document.getElementsByTagName('audio')[0];
var play = document.getElementsByTagName('play')[0];
var pause = document.getElementsByTagName('pause')[0];

function displayControls() {
  play.style.display = "block";
}

// check that the media is ready before displaying the controls
if (myAudio.paused) {
  displayControls();
} else {
  // not ready yet - wait for canplay event
  myAudio.addEventListener('canplay', function() {
    displayControls();
  });
} 

play.addEventListener("keyup", function(event) {
  let KEY = event.code; 
  if (KEY === "Enter" || KEY === "Space") { // Space or Enter pressed.
    myAudio.play();
    play.style.display = "none";
    pause.style.display = "block";
    pause.focus(); // This is very important. Without it the UI breaks.
  }
});

pause.addEventListener("keyup", function(event) {
  let KEY = event.code; 
  if (KEY === "Enter" || KEY === "Space") { // Space or Enter pressed.
    myAudio.pause();
    pause.style.display = "none";
    play.style.display = "block";
    play.focus(); // This is very important. Without it the UI breaks.
  }
});

play.addEventListener('click', function() {
  myAudio.play();
  play.style.display = "none";
  pause.style.display = "block";
});

pause.addEventListener('click', function() {
  myAudio.pause();
  pause.style.display = "none";
  play.style.display = "block";
});

Here is information on what events you can listen for .

Here is information on getting the code for keyboard input .