现有功能的 Keydown 和 keyup

Question

目前我有控制漫游者的按钮。例如，一个叫做 "forward"，当按下时加速，但当释放时再次停止流动站。现在我想通过按键实现对流动站的控制。所以例如"w" 应在按下键时加速并在按下键时停止。到目前为止我发现的网站没有显示如何将我已经存在的功能包含在 JS 中以进行 keydown 和 keyup。我无法很好地编写代码来自己解决这个问题。它们仅显示按下键时如何打印消息。有人可以帮我吗？

编辑：代码和解决方案可以在下面的答案中找到

EDIT2：我编辑键的解决方案就在这里

function functForward{
    var myRPM = document.getElementById('slider').value;
    var myAng = document.getElementById('slider2').value;

    //functForward code
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById("demo").innerHTML = this.responseText;
        }
      };
      var request = "?drive=1" + "&rpm=" + myRPM + "&ang=" + myAng;
      console.log(request);
      xhttp.open("GET", request, true);
      xhttp.send();
}

function functStopDrive(){
    var myRPM = document.getElementById('slider').value;
    var myAng = document.getElementById('slider2').value;

    //funcstopdrive code
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById("demo").innerHTML = this.responseText;
        }
      };
      var request = "?drive=0" + "&rpm=" + myRPM + "&ang=" + myAng;
      console.log(request);
      xhttp.open("GET", request, true);
      xhttp.send();
}

var addEvent = document.addEventListener ? function(target, type, action) {
  if (target) {
    target.addEventListener(type, action, false);
  }
} : function(target, type, action) {
  if (target) {
    target.attachEvent('on' + type, action, false);
  }
}

addEvent(document, 'keydown', function(e) {
  e = e || window.event;
  var key = e.which || e.keyCode;
  if (key === 87) {
    functForward();
  }
});
addEvent(document, 'keyup', function(e) {
  e = e || window.event;
  var key = e.which || e.keyCode;
  if (key === 87) {
    functStopDrive();
  }
});

<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"> 
</script>
<div class="col-sm-4">
<button id="Forward" type="button" class="btn btn-success btn-lg btn-block" 
ng-mousedown="functForward();" ng-mouseup="functStopDrive();">Forward</button>
</div>

<div id="slidecontainer">
 <input type="range" ng-model="myRPM" min="0" max="8000" id="slider" step="500">

 <input type="range" ng-model="myAng" min="-60" max="60" id="slider2" step="5">
</div>

Answer 1

您可以使用附加到 document 对象的函数 onkeydown 和 onkeyup。

编辑 1

我已经编辑了答案，将功能从关键侦听器中分离出来，以便可以通过按钮访问它们。

编辑 2

首先，我会让滑块具有 id 而不仅仅是 class，因为这将使您更容易解析。

我建议在每次函数运行时向 DOM 询问值，而不是像您所做的那样将值传递给函数，因为我已经编辑了下面的代码来做到这一点：

function functforward{
        var myRPM = document.getElementById('slider').value;
        var myAng = document.getElementById('slider2').value;

        //funcforward code
          var xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
              document.getElementById("demo").innerHTML = this.responseText;
            }
          };
          var request = "?drive=1" + "&rpm=" + myRPM + "&ang=" + myAng;
          console.log(request);
          xhttp.open("GET", request, true);
          xhttp.send();
}

function functStopDrive(){
        var myRPM = document.getElementById('slider').value;
        var myAng = document.getElementById('slider2').value;

        //funcstopdrive code
          var xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
              document.getElementById("demo").innerHTML = this.responseText;
            }
          };
          var request = "?drive=0" + "&rpm=" + myRPM + "&ang=" + myAng;
          console.log(request);
          xhttp.open("GET", request, true);
          xhttp.send();
}

document.onkeydown = function (e) {
    if(e.key == 81){
         functForward();
    }
}

document.onkeyup = function (e) {
    if(e.key == 81){
        functStopDrive();
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="col-sm-4">
  <button id="Forward" type="button" class="btn btn-success btn-lg btn-block" ng-mousedown="functForward();" ng-mouseup="functStopDrive();">Forward</button>
</div>

<div id="slidecontainer">
  <input type="range" ng-model="myRPM" min="0" max="8000" id="slider" 
step="500">

  <input type="range" ng-model="myAng" min="-60" max="60" 
id="slider2" step="5">
</div>

现有功能的 Keydown 和 keyup

Keydown and keyup for existing function

javascript

keypress