1

I have a directive where I am trying to bind the keypress and keydown events but for some reason they will not register.

element.bind("keydown keypress", function (event) {
    console.log("here");
});

Any clues why this could be ?

If you look at the file selectMe.js in this plnkr you can see the binding.

War10ck
  • 12,387
  • 7
  • 41
  • 54
runtimeZero
  • 26,466
  • 27
  • 73
  • 126
  • Where is that directive in your template? – Shomz Feb 20 '14 at 21:28
  • sorry..i was debugging it..trying various events.. put it back in.. please check the file selectMe.js – runtimeZero Feb 20 '14 at 21:34
  • 1
    Is there a reason you aren't using the built in key directives? http://docs.angularjs.org/api/ng/directive/ngKeypress. Also what are you trying to bind? don't you need something to have focus to get key events? – hassassin Feb 20 '14 at 21:49

2 Answers2

2

Try adding tabindex="0" to the <table>. With this you make the <table> focusable with a click or pressing tab. However you may be interested on starting listening to key events as soon as the page is loaded. Then you should bind the event to document:

angular.element(document).bind(...)
AxeEffect
  • 6,345
  • 4
  • 37
  • 33
0

If you bind to the table element, you won't get key events because the table doesn't have focus. See this question for info on which elements can have focus.

The events do bubble up however, so you can either add an invisible input or anchor element and get the keyboard events when they bubble up, or just listen on your document element to get any unhandled events. You can also check the ctrlKey flag on the key event instead of tracking the control key yourself:

var doc = angular.element(document);
doc.on('keyup', function(e) {
  if (e.ctrlKey) {
    if (e.keyCode === cKey) {
        $scope.valueToBeCopied = e.target.value;
        console.log('copy: valueToBeCopied: ' + $scope.valueToBeCopied);
      }
      if (e.keyCode === vKey) {
        e.target.value = $scope.valueToBeCopied;
        console.log('paste: valueToBeCopied: ' + $scope.valueToBeCopied);
      }
    }
});

I don't know how much that helps though with what you seem to be attempting. You'll have to track which element has the virtual 'focus' some other way.

Community
  • 1
  • 1
Jason Goemaat
  • 28,692
  • 15
  • 86
  • 113
  • Jason.. doesn't quiet work.. this simply gives me all the cells in the table and not the one i clicked on.. you can see a plnkr here http://plnkr.co/edit/0NuKiaKYxmDl2NVSTaDJ goto file ctMyCell.js – runtimeZero Feb 21 '14 at 14:18
  • I don't see where you are selecting a row, that is what my last statement was about. You'll have to do something to mark a row as selected, i.e. add a 'selected' class to the table row or add a selected property to the scope or row object. I don't think your question has enough detail about what you are trying to do for me to help any more. You should write another question with more details since I think this one is limited enough to be useful on its own. – Jason Goemaat Feb 21 '14 at 19:43