Binding Javascript keypress events

Question

I have a need to monitor the state of the Shift key, whether it is up or down. Its purpose is to notify the user that while the shift key is held down, the drag and drop operation they are about to perform is going to COPY the node(s), and not move them.

I have it working perfectly with the code below, however, if I hold the Shift key and perform the drag and drop, the hook no longer exists; the screen no longer responds to the key press and remains in the "pressed" state.

I'm guessing there is either an order of operations issue or a missing piece. Javascript experts please advise.

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

Answer 1

I'm not sure why your code is failing, since you didn't include drag and drop code, but there's an easier way to do what you want. For any event fired by the browser, you can access shiftKey property, which is going to be true, if the shift key is pressed:

window.onmousemove = checkShift;

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