15

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.

Avatar
  • 14,622
  • 9
  • 119
  • 198
Riera
  • 369
  • 1
  • 2
  • 12

5 Answers5

19

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" />
Ricky
  • 363
  • 1
  • 8
7

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.

Talha
  • 18,898
  • 8
  • 49
  • 66
  • 1
    Thanks for the answer, but the event is still raised if another key is pressed at the same time (like Alt+L). Furthermore, the function must return false because when alt key is pressed, Windows put the focus in the browser toolbar. – Riera Jul 10 '12 at 12:24
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;
        }
    });
});
Riera
  • 369
  • 1
  • 2
  • 12
  • this solution looks to be the better solution out of them all so far due to the fact that it's going to be compatible with more browsers. Not all browsers understand event.keyCode. Some use event.which. This solution covers it all. – Brandon Oct 14 '16 at 02:49
  • `keyCode` is deprecated https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode, but the `altKey` (boolean) property works even better. – Jan Dolejsi May 05 '23 at 11:42
3

just put e.preventDefault();

$(document).on('keydown', function (e) {
    if (e.key === 'Alt') {
        e.preventDefault();
    }
});
Shadow
  • 8,749
  • 4
  • 47
  • 57
Jon Snow
  • 31
  • 1
  • 2
    Try to explain more clearly why this is an answer to the question. Does this solution trigger exclusively as stated in the question? – Jeroen Heier Oct 09 '18 at 03:43
0

Use event.preventDefault() to avoid triggering the current event Alt.

For example, when you press the space key the scroll will move to the bottom page, so to solve this use preventDefault to avoid this default behavior. The same idea to the Alt key.

function handleOnkeydown(evt) {
    if (!evt.altKey) return;
    event.preventDefault();
    console.log('alt key with prevent default');
} 

const input = document.querySelector('input');
input.addEventListener('keydown', handleOnkeydown);
<input type="text" />