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

Javascript keycode clash: "right arrow" and "single quote"

本文关键字：单引号 右箭头 键码 冲突 Javascript      更新时间：2023-09-26

下面的脚本做了它应该做的事情，也就是说，它对键"向左箭头"和"向右箭头"做出反应。但是，由于键码冲突，它也会对单引号做出反应。这使得无法在输入字段中输入该字符。对此有什么办法吗？

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

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

如果该属性位于事件对象中，则需要keyCode：

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

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

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>

keypress不应该捕获控制键，如左/右箭头。 如果使用keydown事件，单引号键码为 222 绝对没有冲突

由于它是文本输入，因此当有人尝试使用箭头键在输入中移动光标时，您似乎也会遇到问题。因此，应该使用停止事件传播/冒泡，并且可以解决您询问的主要问题。

// assuming you've grabbed an input in var input_ele
input_ele.onkeypress = function (e) {
    e = e || window.event;
    if (e.stopPropagation) {
        e.stopPropagation();
    } else {
        e.cancelBubble = true;
    }
};

使用此选项将阻止 keypress 事件离开输入元素，从而永远不会到达文档元素以触发不需要的行为。换句话说，您不会破坏非常标准的控制元素的预期行为。

使用keydown keypress

jS： 

document.onkeydown=function(event){
  if(window.event) event=window.event;
  var keycode=(event.keyCode)?event.keyCode:event.which;
  switch(keycode){
    case 37: alert("an arrow");
      break;
    case 39: alert("another arrow");
      break;
  }
}

小提琴 ： http://jsfiddle.net/p9x1Lj4u/2/

相关文章：