Using AngularJS ngKeyup on a div rather than an input

Question

I've set up a Plunker with some example code: http://plnkr.co/edit/upExTHzpkwtZ45mdikFr?p=preview

The very succinct question is: I'm trying to use AngularJS' ng-keyUp directive. In the docs I've only seen is used on an input, although I'm trying to capture keypresses anywhere on the page rather than just inside an input box. Like so:

// view

<div ng-keyup="keyPress($event)">
     // The bulk of my controller's view goes in here
</div>

// inside controller

$scope.keyPress = function(e){
     console.log(e);
}

Again, see the Plunker above for an example. Currently, it doesn't work at all and nothing is logged. How can I get it to work properly?

I think that you should rather use ng-click: <div ng-click="keyPress($event)"> because use on your page just click on your div. But maybe I don't understand your case. — lukpaw
– lukpaw, Commented Nov 11, 2013 at 8:31

oori · Accepted Answer · 2013-11-11 08:26:00Z

24

Try to give the div element focus, or use tabindex="1"

answered Nov 11, 2013 at 8:26

oori

5,7511 gold badge34 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JVG Over a year ago

Perfect, tabindex="1" got it working. It had a weird :focus outline around it when I used this though, which I fixed by changing the css of .container:focus {outline: 0;}

Anurag Rana Over a year ago

this method worked for me first I have to click on div then only keys are detected. I am working on Django and using templates.

Paul Wand · Accepted Answer · 2015-06-15 02:26:33Z

0

There is always good old vanilla coffee-script '.'

document.onkeypress = (e) ->
  console.log String.fromCharCode(charCode)

answered Jun 15, 2015 at 2:26

Paul Wand

3235 silver badges12 bronze badges

Collectives™ on Stack Overflow

Using AngularJS ngKeyup on a div rather than an input

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related