Detect Ctrl+Alt+O key press in a ng-grid cell of AngularJS

Question

I am able to detect single key press but when I press 3 keys at a time, It doesn't trigger the event. Below is my code. When I press delete button, It detects but when I hit Ctrl + Alt + O, It doesn't trigger the event.

I am trying to modify the ng-grid cell value and once It's modified I would like to restore the previous value on press of these three keys.

$scope.pressedKey = function (keyObj) {
    if (keyObj.key.toLowerCase() == "delete") {
        console.log("Delete key press  Detected");
    }
    if (keyObj.key.toLowerCase() == "control" && keyObj.key.toLowerCase() == "alt" && keyObj.key.toLowerCase() == "o")
    {
        console.log("Ctrl Alt O key press Detected");
    }
};

$scope.ng_grid_column_defs =
[
    {
        field: "A",
        displayName: "A",
        width: "**"
    },
    {
        field: "B",
        displayName: "B",
        width: "*"
    },
    {
        field: "C",
        displayName: "C",
        width: "***"
    }
];

$scope.my_ng_grid = {
    data: "$scope.data",//this data comes from service
    columnDefs: context.ng_grid_column_defs,
    enableColumnResize: true,
    enableCellEdit: true,
    enableCellEditOnFocus: true,
    enableCellSelection: false,
    enableRowSelection: true,
    rowHeight: 20,
    rowTemplate: '<div ng-keydown="pressedKey($event)" tabindex="1" style="height: 100%; width: 100%">' +
                '<div ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell ">' +
                  '<div ng-cell></div>' +
                '</div>' +
             '</div>',
    beforeSelectionChange: function(rowItem, event){},
    afterSelectionChange: function (rowItem, event){}

};

How can I achieve this?

If you want to get quick response, worth to post Demo in Plunker/Fiddle/Codepen with your ui-grid table, custom cellTemplate. It will save us a lot of time. Thanks — Maxim Shoustin, Nov 09 '17 at 07:57

score 5 · Accepted Answer · answered Nov 09 '17 at 07:27

I absolutely don't know angular, so I won't talk about it, but

if (keyObj.key.toLowerCase() == "control" && 
  keyObj.key.toLowerCase() == "alt" &&
  keyObj.key.toLowerCase() == "o")
{
    console.log("Ctrl Alt O key press Detected");
}

is a dead end.

If keyObj.key is a String, then its toLowerCase() returned value can't be "control" and "alt" and "o" at the same time.

Now, assuming keyObj is a KeyboardEvent, then you should have .altKey and .ctrlKey properties attached to it.

So to detect ctrl + alt + o,

if (keyObj.key.toLowerCase() == "o" &&
  keyObj.altKey &&
  keyObj.ctrlKey)
{
    console.log("Ctrl Alt O key press Detected");
}

Sorry for delayed response!!! 'keyObj.key' cannot be equal to 3 strings at a time. So checking that way makes no sense. That's really a dead end. What you added at last in your answer works perfectly. Thanks! — Ram, Nov 16 '17 at 17:08

sphirate.thremer · Answer 2 · 2017-11-10T12:46:22.167

2

There are 3 points:

You should use 'keydown' or 'keyup' events;
You should check event.altKey === true && event.ctrlKey === true && event.shiftKey === false to detect if that CTRL and ALT are pressed and SHIFT isn't;
You should check for event.keyCode === 79 value to detect if key "O" was pressed. It's a number of key on keyboard and won't change if user switch his input language. If you need only Latin variant you still could check event.key === 'o'

document.body.addEventListener('keyup', function(event) {
  if (event.ctrlKey && event.altKey && !event.shiftKey && event.keyCode === 79) {
    console.log('CTRL + ALT + O was pressed');
  }
})

Focus on this snippet and then try to press "CTRL + ALT + O" and any other combinations

edited Nov 10 '17 at 12:46

answered Nov 10 '17 at 12:38

sphirate.thremer

104
4

1

You should have considered editing the other correct answer because your answers are essentially the same. – doubleOrt Nov 14 '17 at 16:13
Thanks for the response! If you read my question. In my case the 'addEventListener' is not required as the key event is already getting triggered using 'ng-keydown' in my html code. Other than this the info is somewhat similar to the answer given by Kaiido. – Ram Nov 16 '17 at 17:16

score 1 · Answer 3 · answered Oct 25 '17 at 17:43

1

There is a similar question for detecting key presses that indicates to use keydown instead of pressedKey. The answer by @Martijn Welker seemed to answer the other issue.

answered Oct 25 '17 at 17:43

Steven Scott

10,234
9
69
117

Thanks @Steven!!! I have used ng-keydown event only. It still doesn't work. – Ram Oct 25 '17 at 17:50
Have you tried stepping into the code in a debugger to see what is happening? Can you detect just the Control keydown, the alt keydown on their own? – Steven Scott Oct 25 '17 at 17:51
Yes my code detects any key but individually. The combo of keys doesn't work. – Ram Oct 25 '17 at 17:53
I'm sure about one thing. I am struggling with this just because of ng-grid. If the ng-grid were not there then It would have worked properly. – Ram Oct 25 '17 at 17:57
I am not sure how to do it, but looked at the other responses. All I can think of is use the debugger, and press and hold the CTRL key to see where the code goes. Then press the ALT key and see how the code comes into your program, and see what state the CTRL key might be in. Maybe the state of the key has changed? – Steven Scott Oct 25 '17 at 17:57
I will definitely go with your idea and will update here. – Ram Oct 25 '17 at 17:59

Detect Ctrl+Alt+O key press in a ng-grid cell of AngularJS

3 Answers3