绑定JavaScript键盘按键事件

Question

我需要监控Shift键的状态，无论它是处于按下还是弹起的状态。其目的是通知用户，当他们按住shift键时，拖放操作将会复制节点而不是移动它们。

我已经用下面的代码完美地实现了它，但是如果我按住Shift键进行拖放，钩子（hook）就不存在了；屏幕不再响应按键并保持“按下”状态。

我猜测可能存在操作顺序问题或缺少某个环节。请JavaScript专家指导。

<form id="form1" runat="server">
<div>
    <table>
        <tr>
            <td valign="top"><ASP:Literal id="treeLeft" EnableViewState="false" runat="server" /></td>
        </tr>
    </table>
    
    <asp:Label ID="lblCopyEnabled" runat="server" BackColor="Green" Text="Item will be Copied" ForeColor="White" Font-Bold="true" style="padding: 0px 10px 0px 10px; display: none" />
</div>

 <script type="text/javascript">
     document.onkeydown = KeyDownHandler;
     document.onkeyup = KeyUpHandler;

     var SHIFT = false;

     function KeyDownHandler(e) {
         var x = '';
         if (document.all) {
             var evnt = window.event;
             x = evnt.keyCode;
         }
         else {
             x = e.keyCode;
         }
         DetectKeys(x, true);
         ShowReport();
     }
     function KeyUpHandler(e) {
         var x = '';
         if (document.all) {
             var evnt = window.event;
             x = evnt.keyCode;
         }
         else {
             x = e.keyCode;
         }
         DetectKeys(x, false);
         ShowReport();
     }
     function DetectKeys(KeyCode, IsKeyDown) {
         if (KeyCode == '16') {
             SHIFT = IsKeyDown;
         }
         else {
             if (IsKeyDown)
                 CHAR_CODE = KeyCode;
             else
                 CHAR_CODE = -1;
         }
     }
     function ShowReport() {
         var copyLabel = document.getElementById("<%= lblCopyEnabled.ClientID %>");
         if (SHIFT) {
             copyLabel.style.display = "inline";
             ob_copyOnNodeDrop = true;
         }
         else {
             copyLabel.style.display = "none";
             ob_copyOnNodeDrop = false;
         }
         
     }
</script>

</form>

- Honus Wagner

---

你有任何想法为什么这不起作用吗？怀疑哪些代码部分出了问题？例如：keyUpHandler 是否在某个时刻被调用了？这可能会给你一些想法... - Derek Adair

拖放部分在哪里？与此相关的代码是什么？ - Pointy

你真的想在按下 Shift 键时进行复制吗？通常情况下，当按下 Ctrl 键时系统会进行复制操作，而按住 Shift 键则会移动。另外，你应该使用 e = e || window.event 来规范化事件接口，不要检查 document.all 并假设它是运行 IE 的浏览器。 - Marcel Korpel

谢谢您的建议。我忘了提到，我完全删除了执行实际拖放的代码，只保留了复制或移动的通知。这是我的错误。 - Honus Wagner

Answer 1

我不确定为什么你的代码失败了，因为你没有包含拖放代码，但有一种更简单的方法可以实现你想要的功能。对于浏览器触发的任何事件，你都可以访问shiftKey属性，如果按下了Shift键，它将为true：

window.onmousemove = checkShift;

function checkShift(e)
{
  if (!e) var e = window.event;
  if (e.shiftKey)
  {
    ....Copy....
  }
  else
  {
    ....Move....
  }
}

- Ilya Volodin

---

太棒了！完美运行，但似乎只在FireFox中有效。有没有让它在IE7+中运行的建议？谢谢。 - Honus Wagner

我编辑了代码，使其在IE中也能正常工作。shiftKey是跨浏览器的，只需要正确连接事件并使用window.event vs. attribute即可。 - Ilya Volodin