Capture Key Press (Or Keydown) Event on Div Element

How can I use a 'keydown' event listener on a div?

Give the div a tabindex, so it will be focusable. In your case, a tabindex of -1 would be best as it would allow the element to be focused but remain inaccessible by the tab key.

The tabindex global attribute indicates if its element can be focused, and if/where it participates in sequential keyboard navigation (usually with the Tab key, hence the name).
A negative value (usually tabindex="-1") means that the element should be focusable, but should not be reachable via sequential keyboard navigation. It's mostly useful to create accessible widgets with JavaScript.

You can then add a keydown event listener to the element and check for the keyCode of the event.

document.getElementById("someId").addEventListener("keydown", function(event){
    //do something on keydown
    if(event.keyCode==13){
     //enter key was pressed
    }
    if (event.keyCode >= 65 && event.keyCode <= 90){
       //input was a-z
    }
});

Detecting keys pressed on a div

The div needs to be focusable. Just add

tabindex="0"

as an attibute on the div.

Demo

.keypress on a DIV tag?

Yes: you need to add a tabindex attribute to the <div> to allow it to receive the focus.

<div id="idtext" tabindex="1"></div>

Also, the property you want for the character code of the text entered in a keypress event is which, not keyCode.

Finally, the HTML comment tags inside the <script> element are unnecessary in all modern browsers.

Keydown event in a certain element of the DOM

Solved adding a tabindex 1 to the ".upper-canvas " (yes with blank space) element and then binding the keydown on the ".upper-canvas " with jQuery.

var canvas = new fabric.Canvas('c');
$(document).ready(function(){
    $(".upper-canvas ").attr('tabindex', 1);
})
$(".upper-canvas ").on("keydown", function(event){
    console.log("Hi");
});

JSFiddle Solution

How to catch ng-keypress/ $event when clicked outside of div?

So the issue is because ng-keydown is on the <td> tag so the function will only be called when it's the currently focused element, but it sounds like you want to respond to the key down event from anywhere on the page.

You can do this by using ng-keydown on the body tag instead of the <td>, then make the function broadcast an event that can be listened to from the sudoku component to run the insertNum logic. Like so:

<body ng-keydown="onMyKeydownEvent($event)">

Then you bound the function on the $rootScope within run() to broadcast an event.

app.run(function($rootScope) {
  $rootScope.onMyKeydownEvent = function(e) {
    $rootScope.$broadcast("MyKeydownEvent", e);
  };
});

After that add the listener to your component.

$scope.$on("MyKeydownEvent", function(e) {
  // insertNum logic goes here.
});

You will also need to make some adjustments to the logic as things like e.currentTarget and $scope.selectedCol = col; $scope.selectedRow = row; will no longer work as expected. Instead the ng-click="selectedCell(row, col)" on the <td> tag should be responsible for setting the required cell data into the scope so that it can be used within the event.

Capture KeyCode and trigger event by base of HTML DIV in Aurelia

I've created a simple demo for you: here

the demo is in JS, but you can convert it fairly easily back to TS.
notice multiple point:

you don't have to hook the events manually from the TS/JS code, you can use .delegate instead - this is the easy and right way to do it.
because of point #1, you don't have to bind the id anymore.
for a div to capture keyboard events, it has to be targetable. you can achieve that by adding tabindex="0" to the div. it will also add some styling when the div is selected - but we can fix that in css.

<template>
  <style>
  div[tabindex]{
    outline: none;
  }
  </style>
  <div tabindex="0" keydown.delegate="handleKeyInput($event)">
    First Name: <input type="text"></br>
    Last Name : <input type="text"></br>
    <div class="col s12 right-align">
      <button  click.delegate="cancel()" >Cancel</button>
      <button  click.delegate="submit()" >Submit</button>
    </div>
  </div>
</template>

export class App {
  handleKeyInput(event) {
    if (event.keyCode === 121) {
      this.submit();
    } else if (event.keyCode === 115) {
      this.cancel();
    } else {
      return true;
    }
  }

  submit() {
    console.log("form submitted");
  }
  cancel() {
    console.log("Form cancelled");
  }
}