Javascript键码冲突：“右箭头”和“单引号”

arataj 发表于 Dev

阿拉塔

下面的脚本执行应做的工作，即，它对键“向左箭头”和“向右箭头”做出反应。但是，由于键码冲突，它也会对单引号做出反应。这样就不可能在输入字段中输入该字符。可以采取任何措施吗？

<script type="text/javascript">
  onload = function(){
    document.onkeypress=function(e){
      if(window.event) e=window.event;
      var keycode=(e.keyCode)?e.keyCode:e.which;

      switch(keycode){
        case 37: window.location.href='set.jsp?index=5';
          break;
        case 39: window.location.href='set.jsp?index=7';
          break;
      }
    }
  }
</script>

格雷格·伯格哈特（Greg Burghardt）

当用户按下单引号键时，该e.keyCode属性为零，该e.which属性为39。执行String.fromCharCode(39)将返回单引号。

您需要keyCodeif属性是否在事件对象中：

var keycode = "keyCode" in e ? e.keyCode : e.which;

这样，当该属性存在于事件对象中并且该which属性也存在时，您将获得keyCode零。

document.onkeydown = function(event) {
    event = event || window.event;

    var keyCode = "keyCode" in event ? event.keyCode : event.which;

    switch (keyCode) {
        case 37: console.log("37 was pressed", event); break;
        case 39: console.log("39 was pressed", event); break;
    }
};

编辑1：其他评论者和答案正确。我忘记了您不应该通过keypress事件检测控制键。更改为onkeydown。

跨浏览器工作的完整HTML示例：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Key Codes Test</title>
</head>
<body>
    <script type="text/javascript">
        document.onkeydown = function(event) {
            event = event || window.event;

            var keyCode = "keyCode" in event ? event.keyCode : event.which;

            switch (keyCode) {
                case 37: console.log("37 was pressed", event); break;
                case 39: console.log("39 was pressed", event); break;
            }
        };
    </script>
    <input type="text" size="30">
</body>
</html>