How to detect in Javascript when the ALT key is pressed?

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.

score 19 · Answer 1 · edited Sep 08 '22 at 09:26

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

edited Sep 08 '22 at 09:26

Fabio Ribeiro de Carvalho

661
7
21

answered Jul 10 '12 at 11:23

Ricky

363
1
8

there are also something like : evt.ctrlKey (for ctrl) – Ricky Jul 10 '12 at 11:25

score 7 · Answer 2 · answered Jul 10 '12 at 11:33

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.

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

score 3 · Accepted Answer · answered Jul 11 '12 at 12:30

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;
        }
    });
});

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

score 3 · Answer 4 · edited Oct 09 '18 at 03:14

3

just put e.preventDefault();

$(document).on('keydown', function (e) {
    if (e.key === 'Alt') {
        e.preventDefault();
    }
});

edited Oct 09 '18 at 03:14

Shadow

8,749
4
47
57

answered Oct 09 '18 at 02:32

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

score 0 · Answer 5 · answered Sep 08 '22 at 09:05

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

How to detect in Javascript when the ALT key is pressed?

5 Answers5

Linked