javascript alt key

Question

We are creating a web user interface that looks like a desktop window. Now we need to handle the Alt key. When Alt key is pressed the focus goes to the upper menu.

In Javascript, how to get the event for Alt key when ONLY Alt key is pressed? I need to ensure that no other key was pressed at the same time.

Thanks in advance.

Answer 1

maybe like this

document.onkeydown = keydown;

function keydown(evt) {
    if (!evt) evt = event;
    if (evt.altKey) {
        console.log('alt');
    }
} // function keydown(evt)​

<input type"text" onkeydown="keydown" />

Answer 2

Working Demo

document.onkeyup = KeyCheck;       

function KeyCheck(e)
{
   var KeyID = (window.event) ? event.keyCode : e.keyCode;
   switch(KeyID)
   {
      case 18:
      document.Form1.KeyName.value = "Alt";
      // do your work on alt key press....
      break; 

      case 17:
      document.Form1.KeyName.value = "Ctrl";
      break;
   }
}

And your html may be like that

<form name="Form1">

<input type="text" name="KeyName" value="" />

</form>​

Note: If you want to get the alt event on other control/type than modify it with your requirements.

Answer 3

I don't know if this is the most elegant solution, but it worked fine.

$(function()
{
    //Flag to check if another key was pressed with alt
    var vAnotherKeyWasPressed = false;
    //ALT keycode const
    var ALT_CODE = 18;

    //When some key is pressed
    $(window).keydown(function(event)
    {
        //Identifies the key
        var vKey = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
        //The last key pressed is alt or not? 
        vAnotherKeyWasPressed = vKey != ALT_CODE;
    });

    //When some key is left
    $(window).keyup(function(event)
    {
        //Identifies the key
        var vKey = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;

        //If the key left is ALT and no other key is pressed at the same time...
        if (!vAnotherKeyWasPressed && vKey == ALT_CODE)
        {
            //Focus the menu
            $('#myMenu').focus();
            //Stop the events for the key to avoid windows set the focus to the browser toolbar 
            return false;
        }
    });
});