Detecting keys pressed on a div

Question

I need to detect keys pressed on a div. In this plunk I have a div, but if I first click on it and then press a key (for example Del) then no event happens. How to make this work?

HTML

Click on the div and press a key:
<div ng-keypress="pressedKey($event)">

</div>
Key pressed: {{myKey}}

Javascript

angular.module("app", [])

.controller('ctl', function($scope) {

    $scope.pressedKey = function(event) {
        $scope.myKey = event.key;
      }

});

score 3 · Accepted Answer · answered Jun 29 '18 at 21:22

3

The div needs to be focusable. Just add

tabindex="0"

as an attibute on the div.

Demo

answered Jun 29 '18 at 21:22

JB Nizet

678,734
91
1,224
1,255

`Del` key is not detected, how to make that work? – ps0604 Jun 29 '18 at 22:46
got it, need to use `ng-keydown` – ps0604 Jun 29 '18 at 22:49
Nice answer :) - to remove blue glow use CSS `outline: none;` – Kamil Kiełczewski Jan 22 '20 at 22:54

Detecting keys pressed on a div

1 Answers1