1

当用户同时按下“Space”和“Enter”键时，我试图在我的网页中提供全屏选项。我有以下代码。我有以下代码。但它不起作用。我哪里错了？如果我给一个钥匙，它就可以工作。

<!doctype html>
<html>
<head>
  <title>Full Screen Example</title>
  <style type="text/css">
      :-webkit-full-screen #myimage {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <p>Press "space" and "enter" to enter full screen</p>
  <p><strong>To use full-screen mode, you need Firefox 9 or later or Chrome 15 or         later.</strong></p>
  <img src = "./3.jpg" width="640" height="360" id="myimage">
</body>
<script>
var imageElement = document.getElementById("myimage");

function toggleFullScreen() {
    if (!document.mozFullScreen && !document.webkitFullScreen) {
        if (imageElement.mozRequestFullScreen) {
            imageElement.mozRequestFullScreen();
        } else {
            imageElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
        }
    } else {
        if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else {
            document.webkitCancelFullScreen();
        }
    }
}

document.addEventListener("keydown", function(e) {
    if ((e.keyCode == 13) && (e.keyCode == 32)) {
        toggleFullScreen();
    }
}, false);
</script>
4

2 回答 2

1

删除您当前的 addEventListener() 调用并使用我在下面提供的内容来扩充您的脚本。请注意，这在 IE8 中不起作用（但考虑到您正在使用 moz 和 webkit 功能，我想您无论如何都不会针对它）。

var keys = [];

function keyIsDown(keyCode) {
  return (keys.indexOf(keyCode) > -1);
}

document.addEventListener("keydown", function(e) {
  // Remember the key being pressed
  keys.push(e.keyCode);

  // Check if ENTER and SPACE are both being pressed
  if (keyIsDown(13) && keyIsDown(32)) {
    toggleFullScreen();
  }
}, false);

document.addEventListener("keyup", function(e) {
  // Remember that this key is no longer being pressed
  var keyIndex = keys.indexOf(e.keyCode);
  if (keyIndex > -1) keys.splice(keyIndex, 1);
}, false);

感谢 parjun 的基本思想；我只是在没有 jQuery 的情况下解决了这个问题。

于 2013-08-01T06:34:29.243 回答
0

您需要维护一个被按下的键和被释放的键的数组。

var keyArray = [];
function containsAll(firstArray, secondArray){ 
  for(var i = 0 , len = firstArray.length; i < len; i++){
     if($.inArray(firstArray[i], secondArray) == -1) return false;
  }
  return true;
}
document.addEventListener("keydown", function(e) {
      if ((e.keyCode == 13) || (e.keyCode == 32)) {
       keyArray.push(e.keyCode);
      }
    if(containsAll(['13','32'],keyArray)){
toggleFullScreen();
}

  }, false);
$(document).keyup(function (e) {
    keyArray.remove(e.keyCode);
});
于 2013-08-01T06:06:56.267 回答